在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
清除浮动的本质：主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。

  • 示例
  • 方法

示例

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
<style>
  .container {
    background-color: gray;
    border: solid 1px black;
  }
  .container .content {
    background-color: darksalmon;
    float: left;
    margin-left: 10px;
  }
  .container p {
    background-color: aquamarine;
    float: right;
  }
  .clear {
    clear:both;
  }
</style>
<body>
  <div class="container">
    <div class="content">left</div>
    <div class="content">left</div>
    <p>right</p>
  </div>
</body>

float
容器没有包含浮动元素

方法

使用带clear属性的块级元素(不推荐)

在浮动元素后面添加一个带clear属性的块级元素
优点：简单，代码少，浏览器支持好
缺点：如果页面浮动布局多，则需要很多空标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.clear{
  clear:both;
}
</style>
<body>
  <div class="container">
    <div class="content">left</div>
    <div class="content">left</div>
    <p>right</p>
    <div class="clear"></div> <!-- 添加 -->
  </div>
</body>

清除浮动

使用CSS的overflow属性(不推荐)

给浮动元素的容器添加overflow属性
优点：不存在结构和语义化问题，代码量极少 　　
缺点：多个嵌套后，firefox某些情况会造成内容全选；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
.container {
    background-color: gray;
    border: solid 1px black;
    overflow:hidden; /*添加,或者overflow:auto;*/
}
</style>
<body>
  <div class="container">
    <div class="content">left</div>
    <div class="content">left</div>
    <p>right</p>
  </div>
</body>

使用CSS的:after伪元素(推荐使用)

给浮动元素的容器添加一个class，然后给这个class添加一个:after伪元素实现元素末尾添加一个隐藏的块级元素清理浮动。
优点：兼容性好
缺点：ie6-7不支持伪元素：after

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.clearfix:after{ /*添加*/
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
 }
</style>
<body>
  <div class="container clearfix">
    <div class="content">left</div>
    <div class="content">left</div>
    <p>right</p>
  </div>
</body>

使用before和after双伪元素清除浮动(推荐使用)

**给浮动元素的容器添加一个class，然后给这个class添加一个:after伪元素实现元素末尾添加一个隐藏的块级元素清理浮动。
**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  .clearfix:after.clearfix:before{
      content: "";
      display: table;
  }
  .clearfix:after{
      clear: both;
  }
</style>
<body>
  <div class="container clearfix">
    <div class="content">left</div>
    <div class="content">left</div>
    <p>right</p>
  </div>
</body>

容器浮动(不推荐)

**让浮动元素的容器也浮动起来
优点：代码少
缺点：会导致整个页面大部分都处于浮动状态，容易出现问题 **

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
.container {
    background-color: gray;
    border: solid 1px black;
    float:left;
}
</style>
<body>
  <div class="container clearfix">
    <div class="content">left</div>
    <div class="content">left</div>
    <p>right</p>
  </div>
</body>

清除浮动
因为没给容器设置宽度