再说浮动-float

在CSS中有三种基本的定位机制:普通流、浮动和绝对定位。浮动的框可以左右移动,知道它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。今天我们就来详细的了解一下浮动和清除浮动。

认识浮动

为了了解浮动的效果,我这里直接搬出w3school最经典的大图:
浮动效果图

有了对浮动的了解,我们可以很好的实现图文混排等效果。

浮动清除

在图文混排的模式当中,由于文字所在的框需要给浮动框留出空间,所以其部分内容就缩短。

我们都知道浮动元素脱离了文档流,所以块框里面的浮动元素不占据空间。那么,当一个块框里面的所有元素都浮动了会出现什么效果呢?

如上图所示外层容器块框已经不在包围浮动元素了,怎么解决呢?

我们尝试用三个红蓝黄的块框外城块框为灰色来演示清除浮动的效果。

html+css

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
<style type="text/css">
.w{
background-color: gray;
border: 1px solid black;
}
.box{
width: 100px;
height: 100px;
margin: 10px;
}
.d1{
background: greenyellow;
float: left;
}
.d2{
background: blue;
float: left;
}
.d3{
background: red;
float: left;
}
</style>
<div class="w">
<h4>没有清除浮动</h4>
<div class="d1 box"></div>
<div class="d2 box"></div>
<div class="d3 box"></div>
</div>

演示地址: 戳我戳我

方法1: clear

我们在浮动的块框后面增加一个div,并设置clear: both就能解决问题。

这实现了我们想要的效果,但是却需要添加不必要的代码很麻烦。

1
2
3
4
5
6
7
<style type="text/css">
.clear{
clear: both;
}
</style>
<div class="clear"></div>

方法2: 外层容器浮动

我们直接在外层容易上添加浮动,就能达到我们想要的效果。不幸的是,你必须解决下一个元素受到浮动影响的问题。因此这种方法并不适用。

1
2
3
.w{
float: left;
}

方法3: overflow属性

overflow的hidden和auto属性会自动地清除包含的任何浮动元素,而不需要添加额外标记。

1
2
3
.w{
overflow: auto;
}

方法4: 伪类after

其实这种方式和方法1很类似,我们通过伪类给外层容器添加了一个元素并在这个元素上清除浮动。这就是我们常说的clearfix清除浮动解决方案。

1
2
3
4
5
6
7
.w:after{
content: ' ';
height: 0;
display: block;
visibility: hidden;
clear: both;
}

参考资料:

CSS 浮动:http://www.w3school.com.cn/css/css_positioning_floating.asp

《精通css:高级web标准解决方案》