清除浮动

Veröffentlicht am | Bearbeitet am | in

从哪开始浮动？

设置浮动后该元素脱离文档流，后边的元素会自动顶上来取代他的位置。

而浮动的元素纵坐标不会改变，只会横坐标方向的叠加（凡是设置了float的，连续的块级元素都会一起向右排列）

举个栗子

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
31
32
33
34
35
36
37
38
39
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<style>
    .div1 {
            width: 100px;
            height: 100px;
            background-color: red
        }
        
        .div2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
        
        .div3 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
        }
        
        .div4 {
            width: 300px;
            height: 300px;
            background-color: gray
        }
        
        .div5 {
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
        }
</style>

什么是 CSS 清除浮动

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

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

.news img {
  float: left;
  }

.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

清除浮动方法

使用带 clear 属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

  • 优点：简单、代码量少、浏览器兼容性好
  • 缺点：需要添加大量无语义的 html 元素，不易于维护

overflow

将overflow属性设置为hidden或auto均可以清除浮动。

给浮动元素的容器添加浮动

让兄弟来收拾他（兄弟来clear）

直接给浮动元素后面的元素添加clear属性，把他强行排挤开来

:after 伪元素

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="topDiv clearfix">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>

<style>
// 省略基本的样式
// 区别在这里
.clearfix:after {
    content: '.';
    height: 0;
    display: block;
    clear: both;
}
</style>

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格”020”或点”.”，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。