CSS float + :after的栅格布局分析
2016-07-27 本文已影响295人
潇Lee
在CSS布局中，float是经常使用的属性，使用float属性可能用的最常见的就是多个div并排显示，在bootstrap中，float属性也用于栅格布局。栅格布局中，空间切割为垂直方向相互平行的一系列栅格。在bootstrap中，这些栅格是由div块元素来实现的，那么要实现栅格布局，这些div就需要水平排列，bootstrap对每个div使用了float属性：
boostrap栅格样式
从
col-md-1 样式中可以看到，其宽度是根据列总数按照百分比规定的，每个栅格采用 float:left 浮动样式以让其并排显示。其实float用于并排显示div并不是固有的写法，float的特点在于其脱离文档流，浮动在标准文档流上方，但是在其周围是某些元素的时候又占据一定位置，其实float的效果最直接实现的是word中 “文字环绕图片” 的效果：
文字环绕div
上述效果代码：
<style type="text/css">
.float_div{
float: left;
background-color: hotpink;
width: 20%;
height: 100px;
}
</style>
<body>
<div class="float_div">
</div>
<p>我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字</p>
<p>我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字</p>
<p>我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字</p>
<p>我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字</p>
<p>我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字</p>
<p>我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字,我是一段文字</p>
</body>
float应用于div水平排列布局确实有些怪怪的，相关分析可以参考之前看过的一篇博客 CSS float浮动的深入研究、详解及拓展(二)
如果用float用作div水平排列，刚使用的时候最常见的一个问题就是如下：
<style type="text/css">
body {
margin: 0px;
padding: 40px 0px;
}
.row {
box-sizing: border-box;
border: dotted;
}
.col-1 {
float: left;
height: 80px;
width: 15%;
background-color: pink;
}
</style>
<body>
<div class="row">
<div class="col-1">float</div>
<div class="col-1">float</div>
<div class="col-1">float</div>
<div class="col-1">float</div>
<div class="col-1">float</div>
</div>
</body>
我们以为效果是这样：
float布局
但是实际上，结果是这样：
float布局1
我们设置的浮动元素根本就不在父元素内容区域中，已经全部溢出了。因为父元素内容默认情况下的高度是子元素最高的高度，但是子元素都是float元素，子元素脱离了原先的文档流，不参与高度计算，那么父元素的高度自然就是0。如果父元素后面还有内容，float内容会覆盖其一部分，为了清除这个浮动带来的不便，需要清除浮动，清除浮动现在很多都在使用
:after 伪元素来帮助实现，具体方式如下：
.row:after{
display: block;
clear: both;
content: "";
}
使用 after 伪元素在父元素内容区最后添加一个空内容的块元素，并设置块元素左右都不允许有浮动元素，这样浮动元素又 “回到” 了父元素的内容区域。
使用 “回到” 的原因就是，其实采用这种方式，浮动元素其实并没有回到父元素的内容区域中，只是父元素的内容高度和浮动元素高度相同而已。当块元素的 clear 属性设置了左边不能有浮动元素时，那么这个时候其左边如果有浮动元素，这个元素的位置就会在浮动元素的下方，而不是与浮动元素平行。
clear both块元素
上面代码中
.row:after{
display: block;
clear: both;
content: "";
}
伪元素其实和浮动元素不在同一行，但是由于伪元素的内容是空的，因此其并不占据高度，这个时候，父元素的内容高度就变成了和浮动元素高度相同，如果把伪元素的高度手动设置后（上一幅图），就可以很清楚地看到效果。并且由于设置了左右都不允许有浮动元素，父元素之后如果还有其他浮动元素，也不会和父元素中的子元素平行排列。目前这还是很方便的一种方式。
