目录

  1. 为什么要清除浮动
  2. 清除浮动的方法
    1. 使用带clear属性的空元素 div、hr、br都可以
    2. 使用CSS的 overflow 属性
    3. 父元素也设置浮动(给浮动的元素的容器添加浮动)
    4. 使用邻接元素处理
    5. 使用 :after 伪元素
  3. 要点

转载：CSS-清除浮动

为什么要清除浮动

　　浮动的元素是脱离文档标准流的，如果我们不清楚浮动，那么就会造成父元素高度塌陷，影响页面布局。

清除浮动的方法

使用带clear属性的空元素 div、hr、br都可以

　　使用clear:both会把浮动元素的边界拉下来到标准流，从而把对应标准流的位置撑开

1
2
3
4
5
6
7
8
9
# html
<div class="clear"></div>
<br class="clear" />
<hr class="clear" />

#css
.clear {
  clear: both;
}

　　优点：通俗易懂，容易掌握
　　缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

使用CSS的 overflow 属性

　　给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发hasLayout，例如为父元素设置容器宽高或设置zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.news {
  background-color: gray;
  border: solid 1px 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>

　　优点：不存在结构和语义化问题，代码量极少
　　缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；04年POPO就发现overflow:hidden会导致中键失效，这是我作为一个多标签浏览控所不能接受的。所以还是不要使用.

父元素也设置浮动(给浮动的元素的容器添加浮动)

　　优点：不存在结构和语义化问题，代码量极少
　　缺点：给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

使用邻接元素处理

　　什么都不做，给浮动元素后面的元素添加clear属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.content{
  clear:both;
  }

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

使用 :after 伪元素

　　结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }
# 清除浮动
.clearfix:after{
  content: " "; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }

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

要点

　　清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
　　闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。其中涉及的原理有：hasLayout 和 Block formatting contexts 。

通过上面的例子，我们不难发现清除浮动的方法可以分成两类：
　　一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
　　二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素.
　　在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。
　　最后可以使用相对完美的:after伪元素方法清理浮动，文档结构更加清晰。