我们某些时候发现页面的布局发生了破坏,并且跟我们预想的有些不同。
事实上,它可能是由“浮动属性”引起的。
那么,我们该怎么清除浮动?clearfix
是个好方法。
当然我们也会使用float
属性。但是,如果使用 float 属性,则元素将处于浮动状态,浮动元素会脱离文档流,导致父元素塌陷。
通过给父元素添加一个指定的 clearfix
,我们可以在浮动元素上做了一个类似保护膜的东西,我们利用这个保护膜来防止此类事件的发生。
就比如:下方图片内的三个div标签。
第一种方法
当我想让紫色及灰色在上方,然后将红色块放置下方时,利用float
属性时,发生了这样一幕。
.gray{
background-color: gray;
width: 200px;
height: 200px;
float: left;
}
.purple{
background-color: purple;
width: 200px;
height: 200px;
float: left;
}
.red{
background-color: red;
width: 200px;
height: 200px;
}
<div class="purple"></div>
<div class="gray"></div>
<div class="red"></div>
嗯??? 我的红色块呢?
当打开控制台时,却发现它并没有失踪,只是藏起来了。
那么,就说到了clearfix
这个方法。
我们之需要给父元素加上 .clearfix
属性。如上方代码般,既然没有父元素,那么就来创建一下。
.clearfix::after{
content: '';
display: block;
clear: both;
}
.clearfix {
zoom: 1; /* IE 兼容*/
}
.gray{
background-color: gray;
width: 200px;
height: 200px;
float: left;
}
.purple{
background-color: purple;
width: 200px;
height: 200px;
float: left;
}
.red{
background-color: red;
width: 200px;
height: 200px;
}
<div class="clearfix">
<div class="purple"></div>
<div class="gray"></div>
</div>
<div class="red"></div>
第二种方法
只需要给父元素添加overflow: hidden;
即可