一:为什么要清除浮动
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占用位置,最后父级盒子为0时,就会影响下面的标准流盒子。
二:清除浮动的本质
1.清除浮动的本质是清除浮动元素造成的影响
2.复合父盒子本身有高度,则不需要清除浮动
3.清除浮动之后,父级就会根据浮动的子盒子自动检测高度,父级有了高度,就不会影响下面的标准流了
。
三:清除浮动的方法
语法:
选择器 {
clear: 属性值;
}
属性值 | 作用 |
---|---|
left | 清除左侧浮动的影响 |
right | 清除右侧浮动的影响 |
both | 同时清除左右两侧浮动的影响 |
1.额外标签法
额外标签法
也称为隔墙法
额外标签法会在浮动元素末尾添加一个空的标签。例如
< div style=" clear: both"> < /div >
优点:通俗易懂
缺点:结构化差
当我们给父盒子不设置高度的时候,将子元素设置浮动,父盒子默认高度为0
下一个标准流盒子就会顶上来,达不到我们所想要的自动调整父盒子高度,所以我们需要清除浮动
使用额外标签法
,在最后一个浮动元素后面
,设置一个块级
盒子让其堵住浮动盒子,然后给块级元素设置,clear:both
即可
2.父级添加overflow
可以给父级添加
overflow
属性,将其属性值设置为hidden
,auto
或scroll
优点:代码简洁
缺点:无法显示溢出的部分
3.:after伪元素法
:after
伪元素法是额外标签法的升级版,也是给父元素添加下面代码。
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
优点:没有添加标签,结构简单
缺点:照顾低版本浏览器
4.双伪元素清除浮动
也是给父级添加如下代码
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
优点:代码简洁
缺点:照顾低版本浏览器