清除页面浮动

在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。即父级对象盒子无法被撑开，这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

方法一：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    font-size: 0;
}
.clearfix { *zoom: 1; }

整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。 

之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。 

那么问题来了，如何使用上面这段代码呢？

只要写一个.clearfix就行了，然后在需要清浮动的元素中 添加clearfix类名就好了。 

如：

<div class="head clearfix"></div>

方法二：

直接在后面加上一个取消了浮动的空div：<div style="clear:both"></div>

方法三：

 直接在父级元素加上overflow:hidden属性。

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/619

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！