CSS清除浮动的方法 | 邹洋的博客

zouyang0921

CSS清除浮动的方法

前言

摘要： 浮动的元素可以向左或向右移动，直到它的外边缘碰到父容器或另一个浮动元素为止。由于浮动元素不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动元素不存在一样。由于浮动的这种特性，当本属于普通流中的元素浮动之后，父容器内部由于不存在其他普通流元素了，所以表现出高度为0（“高度塌陷”）。但在实际布局中，这并不是我们所希望的，所以需要清除浮动，使父容器表现出正常的高度。

正文

引用W3C的例子，news容器没有包围浮动的元素。

.news {
  background-color: gray;
  border: 1px solid black;
}
.news img {
  float: left;
}
.news p {
  float: right;
}

<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
</div>

清除浮动的方法

方法一：设置高度

给浮动元素的父元素设置height值，如

.news { height: **px; }

问题：扩展性不好，只适合固定高度的布局，不推荐使用。

方法二：给浮动元素的父元素添加浮动

给浮动元素的父元素也添加浮动属性可以清除内部浮动，但是这样会使页面中所有元素都加浮动，margin左右auto失效，影响布局，不推荐使用。

方法三：inline-block 清除浮动方法

给浮动元素的父元素设置 display 属性为 inline-block
问题：margin 左右 auto 失效

方法四：空标签清除浮动

在浮动元素的末尾添加一个空元素，如

<div class="clear"></div>

并在 CSS 中添加

.clear { clear: both; }

即可清除浮动。

.news {
    background-color: gray;
    border: 1px solid black;
}
.news img {
    float: left;
}
.news p {
    float: right;
}
.clear {
    clear: both;
}

<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="clear"></div>
</div>

优点：简单，浏览器兼容性好。
缺点：需要添加大量无意义的空元素，有违结构与表现的分离，后期不容易维护。

方法五：使用相邻元素

给浮动元素后面的元素添加clear属性，如

.news {
    background-color: gray;
    border: 1px solid black;
}
.news img {
    float: left;
}
.news p {
    float: right;
}
.clear {
    clear: both;
}

<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="clear">xxxxxx(内容)</div>
</div>

方法六：使用overflow属性

给浮动元素的父元素添加

overflow: hidden;  // 或 overflow: auto;

在IE6中还需触发 hasLayout，例如 zoom:1。

.news {
  background-color: gray;
  border: 1px solid black;
  overflow: hidden;
  zoom: 1;
}
.news img {
  float: left;
}
.news p {
  float: right;
}

<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
</div>

优点：简单，代码少，不存在结构和语义化问题。
缺点：无法显示需要溢出的内容。

方法七：使用 :after 伪元素

需要注意的是 :after 是伪元素（代表一个元素之后最近的元素），不是伪类。
给浮动元素的父元素添加一个 class，然后给这个 class 添加一个 :after 伪元素实现元素末尾添加一个看不见的块元素来清除浮动。
由于 IE6-7 不支持 :after，需要使用 zoom:1 触发 hasLayout。

.news {
    background-color: gray;
    border: 1px solid black;
}
.news img {
    float: left;
}
.news p {
    float: right;
}
.clearfix:after {
    content: ".";       //生成内容作为最后一个元素，点可以换为其他（如:一个看不见的空格"020"）
    display: block;     //使生成的元素以块级元素显示,占满剩余空间;
    height: 0;          //避免生成内容破坏原有布局的高度
    visibility: hidden; //使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互
    clear: both;
}
.clearfix {
    zoom: 1;            //触发 hasLayout
}

<div class="news clearfix">
    <img src="news-pic.jpg" />
    <p>some text</p>
</div>

优点：结构和语义化完全正确，代码量适中，可重复利用（建议定义公共类），推荐使用。
缺点：复用方式不当会造成代码量增加。

总结

通过以上方法，我们不难发现清除浮动的方法可以分为两类：

一是在浮动元素的末尾添加一个空元素，并设置 clear 属性值为 both，其实 :after 伪元素也是在浮动元素的后面添加了内容为一个点的块元素；
二是通过设置父元素 overflow 属性来清除浮动。

在网页主要布局中通常使用 :after 伪元素来清除浮动，在一些小的模块中使用 overflow:hidden 来清除浮动。