为什么要清除浮动?

为什么要清除浮动?

是为了解决 父元素因为子元素浮动而引起的内部高度为0的问题。
布局:

<body>
<div class="father">
    <div class="big">盒子1div>
    <div class="small">盒子2div>
    大盒子
div>
body>

样式:


为什么要清除浮动?_第1张图片
盒子1和2都设置浮动后
.big, .small{
float: left;
}
解决方法
使用after伪元素清除浮动(推荐使用)

// 先给父元素增加一个类名 clearfix ,然后在样式中添加如下内容
.clearfix:after{
display: block;
content: ‘’;
clear: both;
visibility:hidden; // 允许浏览器渲染,但不显示出来,这样才能实现清除浮动。
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式, 号只有IE6-IE7执行,其他浏览器不执行/
}
优点:符合闭合浮动思想,结构语义化正确

缺点:ie6-7不支持伪元素 :after,使用zoom:1触发hasLayout。

4.使用before和after双伪元素清除浮动

.clearfix:after, .clearfix:before{
content: “”;
display: block;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}

你可能感兴趣的:(为什么要清除浮动?)