Comments (20)
这个问题刚好有思考整理过,今天刚好复习一下。
原文链接:https://xiangshuo.blog.csdn.net/article/details/52749993
回答前的唠叨:
- 在现在的实际工作当中我已经很少用浮动来布局了,真的很少,刚开始学习的时候用的还蛮多,现在Flex布局,标准文档流以及 定位 已经可以满足大部分的布局需求了。
- 浮动带来的问题是盒子塌陷问题,所以我们就来解决这个问题吧
什么是盒子塌陷?
外部盒子本应该包裹住内部的浮动盒子,结果却没有。
问题出现的原因
父元素只包含浮动元素,那么它的高度就会塌缩为零(前提就是你们没有设置高度(height)属性,或者设置了为auto,就会出现这种情况,如果父元素不包含任何的可见背景,这个问题会很难被注意到。
因为子元素设置了float属性,而float属性会把元素从标准文档流中抽离,直接结果就是外部盒子丢了两个孩子,因为内部没有其它盒子了,所以外部盒子只包裹文本节点内容,却把两个内部盒子扔在外面了。
解决方案
- 上面分析了问题出现的原因,不难找到第一种解决方案(既然孩子丢了,那就去找呗)——给外部盒子也添加浮动
把外部盒子也从标准文档流中抽离,让它和孩子们见面。
缺点:可读性差,不易于维护(别人很难理解为什么要给父元素也添上float),而且可能需要调整整个页面布局。
- 在外部盒子内最下方添上带clear属性的空盒子
可以是div也可以是其它块级元素,把 <div style="clear:both;"></div>
放在盒内底部,用最下面的空盒子清除浮动,把盒子重新撑起来。
缺点:引入了冗余元素
-
用overflow:hidden清除浮动
给外部盒子添上这个属性就好了,非常简单。
缺点:有可能造成溢出元素不可见,影响展示效果。 -
用after伪元素清除浮动
给外部盒子的after伪元素设置clear属性,再隐藏它
这其实是对空盒子方案的改进,一种纯CSS的解决方案,不用引入冗余元素。
.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}
这也是bootstrap框架采用的清除浮动的方法。
题外话
其实还有一种最直接的办法:给每个盒子规定width和height,要多大给多大即可。但这并不算什么解决方案,因为这样的布局不是内容自适应的,但如果页面内容极少发生变动,这也是一个不错的方案,因为它的兼容性是毋庸置疑的。
from fe-interview.
清除浮动有如下思路去解决:
1.利用BFC的规则解决高度塌陷,BFC规则里有一条:浮动元素的高度参与BFC的高度计算
,
因此给父元素触发BFC即可,比如父元素添加visibility:auto;
或者float:left
。
2.利用clear:both
属性,给父元素最下方添加元素,设置其属性为:clear:both
, 即可清除浮动, 一般使用伪元素来实现。
3.直接设置父元素的高度(不推荐)。
3种方法最推荐使用第二种使用伪类来实现,最方便,副作用最小。
.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}
```
将`clearfix`添加到父元素的class即可。
from fe-interview.
触发BFC 或 clear: both
from fe-interview.
1.通过设置父标签overflow: auto
2.通过after伪类: {display: block; content: ''; clear: both;}
from fe-interview.
父元素设置overflow:hidden
.clearfix::after{
content:'';
display:block;
height:0;
line-height:0;
clear:both;
}
from fe-interview.
-
外层父元素使用
overflow:hidden;
属性触发 BFC,让内层的float
不会影响外层的布局 -
使用
clear: both;
即clearfix
类的方法,在浮动元素后面添加一个空的div
,使其clear:both;
清除上层浮动元素带来的影响。缺点是会增加 DOM 元素;可以使用伪类::after
+clear:both;
。<div class="float"></div> // float: left 的元素 <div class="clearfix"></div> // clear: both 的元素
from fe-interview.
- 父类设定高度
- 父类设置 overflow:hidden/auto
- 给父类after伪元素 clear:both
- 讲父类变成浮动元素
from fe-interview.
1 给每个盒子设定固定的width和height,直到合适为止,这样的好处是简单方便,兼容性好,适合只改动少量内容不涉及盒子排布的版面,缺点是非自适应,浏览器的窗口大小直接影响用户体验。
2给外部的父盒子也添加浮动,让其也脱离标准文档流,这种方法方便,但是对页面的布局不是很友好,不易维护。
3给父盒子添加overflow属性。 overflow:auto; 有可能出现滚动条,影响美观。overflow:hidden; 可能会带来内容不可见的问题。
4 父盒子里最下方引入清除浮动块。最简单的有:
. 有很多人是这么解决的,但是并不推荐,因为其引入了不必要的冗余元素 。
5 after伪类清除浮动。外部盒子的after伪元素设置clear属性。这是一种纯CSS的解决浮动造成盒子塌陷方法,没有引入任何冗余元素,但是低版本IE不兼容。
https://blog.csdn.net/kirinlau/article/details/73505903
from fe-interview.
设置overflow的方法其实本质上是为父元素设置了BFC,同一思路下可以有很多的解决方案:
- 根元素
- 浮动元素
- 绝对定位元素
- overflow不为visible的元素
- display为flow-root的元素
- contain值为layout、content或paint的元素
……
from fe-interview.
overflow: hidden 天下第一
from fe-interview.
- clear: both; 伪类或空标签
- 直接设置宽高?只能设置在一些固定尺寸的内容,没有自适应 不太好
- bfc 详细参考在这里 bfc-MDN
from fe-interview.
1、给父级 div 定义 height
原理:父级 div 手动定义 height,就解决了父就解决了父级div无法自动获取高度的问题。简单、代码少、容易掌握,但只适合高度固定的布局。
2、在结尾处添加空 div 标签并设置 clear:both
from fe-interview.
- 把height定死(对于高度不固定的情况不行)
- overflow:hidden(有时候会导致内容被截断)
- 给外部元素也加上float(会使外部的元素脱离文档流,导致变形)
- :after{content: ''; font-size: 0; height: 0; display: block; clear: both;} (基本没有缺点)
from fe-interview.
清除浮动的方式
(1)使用clear属性清除浮动。
(2)使用BFC块级格式化上下文来清除浮动。
因为BFC元素不会影响外部元素的特点,所以BFC元素也可以用来清除浮动的影响,因为如果不清除,子元素浮动则父元素高度塌陷,必然会影响后面元素布局和定位,这显然有违BFC元素的子元素不会影响外部元素的设定。
from fe-interview.
父级元素设置高度
父级标签:overflow:hidden激发BFC
空标签:clear:both
伪类:clear:both
from fe-interview.
1.触发父元素BFC
如给父元素设置overflow:hidden,特别注意的是:在IE6中还需要触发hasLayout,例如给父元素设置zoom:1
原理是触发父级BFC后,父元素在计算高度时,浮动的子元素也会参与计算
优点
代码简洁
缺点
设置overflow:hidden容易造成不会自动换行导致超出的尺寸被隐藏掉,无法显示要溢出的元素
2.给父元素设置高度
优点
代码简洁
缺点
不够灵活,只适用于高度固定的布局
3.添加额外标签
在最后一个浮动元素的后面新加一个标签如
,并在其CSS样式中设置clear: both优点
代码简洁,兼容性好
缺点
额外增加无语义html元素,代码语义化差,后期维护成本大
4.使用after伪元素
.clearfix::after {
content: ".";
display: block;
height: 0;
line-height: 0;
clear: both;
visibility:hidden;
font-size: 0;
}
.clearfix {
// 注意此处是为了兼容IE6和IE7浏览器,即触发hasLayoutcs
zoom: 1;
}
优点
符合闭合浮动**,结构语义化正确
缺点
代码量多,因为IE6-7下不支持after伪元素,需要额外写 zoom:1来 触发hasLayout
from fe-interview.
- 设置本来元素的宽高
- 设置overflow:hidden
- 设置多余的元素div,设置其样式为clear:both
- 利用伪元素实现设置为不可见,而且清除浮动
from fe-interview.
- 在后面添加一个dom设置清除浮动或者使用伪元素清除浮动
- 利用BFC特性,父元素使用overflow:hidden
from fe-interview.
1.额外标签法:在最后一个浮动标签后,新加一个标签,给其设置clear:both
优点:通俗易懂
缺点:添加无意义标签,语义化差
2.父级添加overflow:hidden
优点:代码简洁
缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素
3.使用伪元素before和after清除浮动
优点:符合闭合浮动**,结构语义化正确,代码更简洁
缺点:ie6-7不支持伪元素
from fe-interview.
方法一:额外标签法
给谁清除浮动,就在其后额外添加一个空白标签 ,给其设置clear:both。
优点:通俗易懂,书写方便。
缺点:添加许多无意义的标签,结构化比较差。
clear:both:本质就是闭合浮动, 就是让父盒子闭合出口和入口,不让子盒子出来 。
方法二:父元素添加overflow:hidden
通过触发BFC方式,实现清除浮动
优点:代码简洁
缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素。
方法三:使用after伪元素清除浮动
优点:符合闭合浮动**,结构语义化正确。
缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout。
方法四:使用before和after双伪元素清除浮动
优点:代码更简洁
缺点:用zoom:1触发hasLayout.
方法五:为父元素设置高度
缺点: 需要手动添加高度,如何后面的高度发生变化,还要再次修改高度,给后期的维护带来麻烦。
优点: 简单粗暴直接有效,清除了浮动带来的影响
from fe-interview.
Related Issues (20)
- [angular] 第1803天 请说说在Angular中什么是服务和依赖注入(DI)?
- [angular] 第1804天 请说说路由和导航在Angular中如何工作的?
- [angular] 第1805天 请说说在Angular中如何实现表单验证?
- [angular] 第1806天 请说说观察者模式和RxJS在Angular中的应用
- [angular] 第1807天 请说说在Angular中的双向数据绑定是如何工作的?
- [angular] 第1808天 请说说在Angular中如何实现国际化(i18n)?
- [angular] 第1809天 如何在Angular中实现懒加载?
- [angular] 第1810天 如何在Angular中实现导航的控制和保护?
- [angular] 第1811天 请说说在Angular中什么是RxJS?
- [angular] 第1812天 请说说在Angular中的ngFor是什么?有哪些用途? HOT 1
- [angular] 第1813天 请说说在Angular中的路由器是什么?
- [angular] 第1814天 请说说在Angular中的ngSwitch是什么?有哪些用途?
- [angular] 第1815天 请说说在Angular中的组件是什么?
- [angular] 第1816天 请说说在Angular中什么是指令?有哪些类型的指令?
- [angular] 第1817天 请说说在Angular中的依赖注入是什么?
- [angular] 第1818天 请说说在Angular中的NgModule是什么?
- [angular] 第1819天 请说说在Angular中的可观察对象是什么?
- [angular] 第1820天 请说说在Angular中的路由器守卫是什么?它有哪些类型?
- [angular] 第1821天 请说说在Angular中的服务是什么?如何创建一个服务?
- [angular] 第1822天 请说说在Angular中的模板语法是什么?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fe-interview.