一、为什么要清除浮动
很多情况下父级盒子不方便给高度,但是盒子子元素浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子
二、清除浮动的本质
清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后,父级元素就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。
三、清除浮动的方法
知识点:1)、clear:left;不允许左侧有浮动的元素(清除左侧浮动的影响)
2)、clear:right; 不允许右侧有浮动的元素(清除右侧浮动的影响)
3)、clear:both;同时清除左右两侧浮动的影响
实际工作中几乎只有clear:both;
方法(1)、额外标签法(隔墙法)----不推荐使用
是W3C推荐的做法是通过在浮动元素的末尾添加一个空的标签。例如,<div style="clear:both;"></div>,或者其他标签br等亦可
.优点:通俗易懂、书写方便
缺点:添加许多无意义的标签,结构化较差
方法(2)、父级添加overflow属性方法
可以给父级添加overflow为hidden|auto|scroll都可以实现 (auto和scroll会出现滚动条)
优点:代码简洁
缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
方法(3)、使用伪元素清除浮动
:after 方法为空元素额外标签法的升级版,好处是不用单独加标签了
使用方法:
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.claerfix{
*zoom:1; /* IE6/7专有 */
}
优点:符合闭合浮动思想,结构语义化正确
缺点:由于IE6/7不支持:after,使用*zoom:1触发hasLayout
代表网址:百度、淘宝网、网易等
方法(4)、使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
- 优点: 代码更简洁
- 缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
- 代表网站: 小米、腾讯等
什么时候清除浮动呢?
1. 父级没高度
2. 子盒子浮动了
3. 影响下面布局了,我们就应该清除浮动了。