清除浮动总结
一、为什么需要清除浮动?
由于浮动元素不再占有原来的文档流的位置,所以会对后面的元素排版产生影响
- 1.父级没高度
- 2.子盒子浮动了
- 3.影响下面布局,我们就应该清除浮动
二、清除浮动的本质:
- 清除浮动本质是清除浮动元素造成的影响
- 如果父盒子本身有高度,则不需要清除浮动
- 清除浮动之后,父级就会根据浮动盒子自动检测盒子
三、清除浮动的方法:
策略:闭合浮动
1.方式一:额外标签法即隔墙法
步骤:
- 在浮动元素末尾添加一个新的盒子即一个空标签
- 为盒子添加其clear属性
其他写法:
<div style="clear:both"></div>
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差
注意:这个新的标签必须是块级元素,不能是行内元素
2.方式二:父级添加overflow
给浮动盒子的父元素添加overflow属性,将其属性值设置为:hidden,auto或scroll
3.方式三:after伪元素法
:after方式是额外标签法的升级版,也是给父元素添加
代码如下:
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visbility:hidden;
}
.clearfix {
*zoom:1;
}
优点:没有增加标签,结构更简单
缺点:照顾低版本浏览器
4.方式四:双伪元素清除浮动
双伪元素清除浮动是给父盒子添加属性
代码如下:
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix {
*zoom:1;
}
优点:代码更加简洁
缺点:照顾低版本浏览器