为什么需要清除浮动?
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子。

清除浮动的策略:闭合浮动。
清除浮动本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度,则不需要清除浮动
- 清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标隹流了
清除浮动方法
- 额外标签法也称为隔墙法,是W3C推荐的做法
- 父级添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
清除浮动-额外标签法
额外标签法也称为隔墙法,是W3C推荐的做法。额外标签法会在浮动元素末尾添加一个空的标签。
例如<div style=” clear:both”></div>,或者其他标签(如<br/>等)。规范语法:
.clear {
clear:both; /*先写类名*/
}
<div class="clear"></div> /*添加空标签,添加到浮动元素的末尾*/
用额外标签法清除浮动
- 优点:通俗易懂,书写方便
- 缺点:添加许多无意义的标签,结构化较差
注意点:新增清除浮动的盒子要求必须是块级元素,不能是行内元素!举例:
.clear {
clear:both;
}
<div class="clear"></div> /*正确写法,块级元素*/
<span class="clear"></span> /*错误写法,不能是行内元素 span为行内元素*/
清除浮动-父级添加overflow
可以给父级添加overflow属性,将其属性值设置为 hidden、auto或 scroll。
注意是给父元素添加代码!举例:
.box {
overflow: hidden;
width: 800px;
}
.m1 {
float: left;
width: 200px;
height: 200px;
}
.m2 {
float: left;
width: 200px;
height: 200px;
}
<div class="box">
<div class="m1"></div> /*父级为box*/
<div class="m2"></div> /*父级为box*/
</div>
清除浮动-父级添加after伪元素(常用)
语法:
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /* IE6、7 专有*/
}
实际应用:
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
.box {
width: 800px;
}
.m1 {
float: left;
width: 200px;
height: 200px;
}
.m2 {
float: left;
width: 200px;
height: 200px;
}
<div class="box clearfix"> /*父级添加clearfix*/
<div class="m1"></div>
<div class="m2"></div>
</div>
用after伪元素清除浮动
- 优点:没有增加标签,结构更简单
- 缺点:照顾低版本浏览器
清除浮动-双伪元素清除浮动
也是给父元素添加。语法:
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!
转载请注明:转载于37.2度云笔记