一、为什么需要清除浮动
由于父级盒子在很多情况下,不方便给高度,而子盒子浮动又不占有位置,最后导致盒子的高度为0,就会影响下面的标准流
清除浮动的本质:a.清除浮动元素造成的影响
b.如果父盒子本身有高度,则不需要清除浮动
c.清除浮动之后,父级就会根据浮动的子盒子自动检测高度,父级有了
高度,就不会影响下面的标准流
清除浮动的策略:闭合浮动(只限制在父元素)
清除浮动语法:选择器 {clear : 属性值;}
属性值 | 描述 |
---|---|
Left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
二、清除浮动的方法
(1)额外标签法也称隔墙法,是w3c推荐的做法
会在浮动元素末尾添加一个空标签,如
<style>
.clear {
clear : both;
}
</style>
<body>
<div class="damao">大毛</div>
<div class="damao">大毛</div>
<div class="clear"></div>
</body>
注意:必须为块级元素
(2)父级添加overflow属性
将其属性值设置为hidden、auto和scroll
注意:是给父级元素添加代码
优点:代码简洁
缺点:无法显示溢出的部分
(3)父级添加after(伪元素)属性
.clearfix:after {
content:"";
display: block;
height:0 ;
clear:both;
visibility:hidden;
}
.clearfix {
/*IE6、7专有*/
*zoom:1;
}
(4)父级添加双伪元素(在盒子的前后添加一堵墙,将他们闭合在父盒子内)
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}