当子元素是浮动布局时，父元素无法获取到正确的宽高，这种情况常常使用clearfix方案来解决。
** 示例如下：**
1
2
3
| <div>
<div style="float:left; width:100px; height:100px;"></div>
</div>
|
** clearfix方案：（参考bootstrap文档） **
1
2
3
4
5
| .clearfix:before, .clearfix:after { display: table; content: " "; }
.clearfix:after { clear: both; }
<div class="clearfix">
<div style="float:left; width:100px; height:100px;"></div>
</div>
|
但是display: table事实上会产生一个额外的问题，因为table的布局会使父元素与旁边浮动的元素的高度对齐。请运行这个示例：
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
| <!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.content { max-width: 800px; margin: 0 auto; background-color: #eee; }
.right-panel { float: right; width: 180px; height: 500px; margin: 0 10px; background-color: #5bc0de; }
.main-panel { max-width: 700px; margin-right: 200px; background-color: #5cb85c; }
.bottom-panel { height: 200px; background-color: #f0ad4e; }
.floated-child { float: left; background-color: #d9534f; }
.clearfix:before, .clearfix:after { display: table; content: " "; }
.clearfix:after { clear: both; }
</style>
</head>
<body>
<div class="content">
<div class="right-panel"></div>
<div class="main-panel">
<h2>Main content title! title title title title title title</h2>
<div class="clearfix">
<div class="floated-child">some text here, some text here, some text here</div>
</div>
</div>
<div class="bottom-panel">
<p>This is bottom panel</p>
</div>
</div>
</body>
</html>
|
可以看到clearfix的那个div的高度与right-panel对齐了，调整right-panel的高度，clearfix的div的高度会跟着调整。
此时我们的修复方案是，将clearfix的display属性修改为inline。即
.clearfix:before, .clearfix:after { display: inline; content: " "; }
参考：[https://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best]