By 特首

更新日期:

前言

float: left会使元素脱离文档流，不占据文档流的空间。如果子元素使用float: left，父元素不做相关的处理的话，父元素就没法包裹住子元素。之前习惯在父元素上加overflow: hidden来处理这个问题，可是会有局限性，当子元素超出父元素的话，超出部分就会被隐藏，所以说清除浮动这谭水很深。

丑陋的实现方式

html

1
2
3
4
5
6
7
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <br class="cb">
</div>

css

1
2
3
4
5
6
7
8
9
.child {
  width: 25%;
  height: 50px;
  float: left;
  _display: inline;
}
.cb {
  clear: both;
}

最丑陋的实现方式就是在子元素后再加一个用于清除浮动的br元素，写个专门清除浮动的.cb类加在它上面。上面的例子也可使用clear: left清除左浮动，为了方便才使用clear: both，最后不要忘了加上_display: inline兼容IE6。

父亲元素浮动的实现方式

html

1
2
3
4
5
6
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

css

1
2
3
4
5
6
7
8
.parent {
  width: 100%;
  float: left;
}
.child {
  width: 25%;
  float: left;
}

只要父元素也跟着浮动的话，也可以达到效果。可是这样会影响后面元素的定位，而且有些时候父元素是定位死的，无法变成浮动。

overflow实现方式

html

1
2
3
4
5
6
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

css

1
2
3
4
5
6
7
8
9
.parent {
  overflow: hidden;
  zoom: 1;
}
.child {
  width: 25%;
  height: 50px;
  float: left;
}

在父元素上使用overflow: hidden可以达到清除浮动的效果，也可以是overflow: auto。可是通过overflow实现的清除浮动都有一个缺点，当子元素超出了父元素，父元素使用overflow: hidden的话，子元素超出的部分会被隐藏；使用overflow: auto的话，父元素上会出现滚动条，最后也别忘加上zoom: 1触发IE的hasLayout。

display:inline-block的实现方式

html

1
2
3
4
5
6
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

css

1
2
3
4
5
6
7
8
9
.parent {
  font-size: 0px;
}
.child {
  width: 25%;
  display: inline-block;
  *display: inline;
  zoom: 1;
}

其实换个角度想想也可以不使用float来实现效果，那就是用display: inline-block，使得块级元素具有行内元素的特性。IE8以下不支持这个属性，但是有解决的方案就是加上*display: inline; zoom: 1;。为什么要加font-size: 0px?消除现代浏览器上出现的间距，但是在子元素上要重置font-size，除此之外还可以改变html代码缩进，去掉换行，写成一行。

用于现代浏览器的实现方式

html

1
2
3
4
5
6
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
.parent {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}
.child {
  width: 25%;
}

这种用于现代浏览器的实现方式更加灵活了，可是不支持IE10以下的浏览器，flex-flow的两个值分别表示flex-direction（横向还是纵向）、flex-wrap（是否换行），上面的例子是横向多行排列。除此之外还很支持很多属性，想了解更多可以看这篇文章。

:after伪元素的实现方式

html

1
2
3
4
5
6
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

css

1
2
3
4
5
6
7
8
9
10
.parent:after {
  content: "";
  display: table;
  clear: both;
}
.child {
  width: 25%;
  height: 50px;
  float: left;
}

或者

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.parent:before,
.parent:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
.parent:after {
  clear: both;
}
.parent {
  zoom: 1;
}
.child {
  width: 25%;
  height: 50px;
  float: left;
}

这种方式原理利用:after伪元素，实现在父元素内容后面清除浮动的效果。

最佳实现方式

html

1
2
3
4
5
6
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent:before,
.parent:after {
  content: "";
  display: table;
}
.parent:after {
  clear: both;
}
.parent {
  zoom: 1;
}
.child {
  width: 25%;
  height: 50px;
  float: left;
}

这个是现在最广泛被接受做法，作者是Nicolas Gallagher，是前一种方式的改进版。

网格布局

利用清除浮动，我们可以自己开发一个简易的网格布局。

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.row:before,
.row:after {
  content: "";
  display: table;
}
.row:after {
  clear: both;
}
.row {
  zoom: 1;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11 {
  float: left;
}
.col-1 {
  width: 8.333333333333332%;
}
.col-2 {
  width: 16.666666666666664%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33333333333333%;
}
.col-5 {
  width: 41.66666666666667%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.333333333333336%;
}
.col-8 {
  width: 66.66666666666666%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33333333333334%;
}
.col-11 {
  width: 91.66666666666666%;
}
.col-12 {
  width: 100%;
}

使用方法

1
2
3
4
5
6
7
8
<div class="row">
  <div class="col-10">
    ...
  </div>
  <div class="col-2">
    ...
  </div>
</div>

首先利用box-sizing: border-box,将盒子模型设置成IE盒子模型，然后子元素都float: left，按照百分比去设置宽度，父元素使用清除浮动。使用的时候注意col-X数字加起来要等于12就可以了。

参考链接：

文章目录
  1. 1. 前言
  2. 2. 丑陋的实现方式
  3. 3. 父亲元素浮动的实现方式
  4. 4. overflow实现方式
  5. 5. display:inline-block的实现方式
  6. 6. 用于现代浏览器的实现方式
  7. 7. :after伪元素的实现方式
  8. 8. 最佳实现方式
  9. 9. 网格布局