CSS 清除浮动的几种方法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

导读：

CSS 的 Float(浮动)，会使元素向左或向右移动，其周围的元素也会重新排列，Float(浮动),往往是用于图像,使得文字围绕图片的效果，而它在布局时一样非常有用。不过有利也有弊，使用浮动的时候也会带来一些负面效果。为了不因浮动元素破坏整个文档的布局，所以需要清除浮动，而今清除浮动的方法众多，在此就常见的方法进行理解和记录。

基本概念

首先我们来看一下下面这种情况：父元素的边框未被撑开，子元素从下方溢出。

清除浮动前

清除浮动后

为什么会产生上面的情况呢，由于浮动的特性，导致本属于普通流中的元素浮动之后脱离了该流，包含框内部由于不存在其他普通流元素了，也就表现出所谓高度塌陷。而高度的塌陷使页面后面的布局不能正常显示，造成我们本不期望的效果，总的来说浮动带来的负作用包括：

边框不能撑开
背景不能显示
margin 设置值不能正确显示

清除方法

由于浮动带来的影响，所以清除浮动很有必要，而今清除浮动方法不少，不过个别方法也存在着兼容性的问题，接下来就常用的几种方法做下简单的介绍。

1、使用clear属性

在浮动元素下方添加空div,并给该元素写css样式：

//代码简洁，浏览器支持好
.clearfix{ clear:both }
//增加了无意义的结构元素

2、使用overflow属性

给浮动元素的父元素定义 overflow: auto 或者定义 overflow: hidden：

////代码简洁
.overflow: hidden; zoom: 1; //zoom: 1; 兼容低版IE
//不能和position配合使用，因为超出的尺寸的会被隐藏

3、为父元素指定高度

给浮动元素的父元素指定高度：

//简单，简洁
width： * px;
//只适合高度固定的布局

4、伪元素（推荐）

给浮动元素的父元素定义 overflow: auto 或者定义 overflow: hidden：

.clear{ zoom: 1; } // zoom: 1; 兼容低版IE
.clear:after{
content: '';
display: block;
clear: both;
height: 0; // 避免生成内容破坏原有布局的高度
overflow: hidden;
visibility: hidden;}

zoom 属性目前是IE的专有属性，设置该值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变该值时其实也会发生重新渲染，运用这个原理，也就解决了 IE 下子元素浮动时候父元素不随着自动扩大的问题。