在CSS布局中，float是經(jīng)常使用的屬性跪解，使用float屬性可能用的最常見(jiàn)的就是多個(gè)div并排顯示炉旷，在bootstrap中，float屬性也用于柵格布局叉讥。柵格布局中窘行，空間切割為垂直方向相互平行的一系列柵格。在bootstrap中图仓，這些柵格是由div塊元素來(lái)實(shí)現(xiàn)的罐盔，那么要實(shí)現(xiàn)柵格布局，這些div就需要水平排列救崔，bootstrap對(duì)每個(gè)div使用了float屬性：
從
col-md-1 樣式中可以看到惶看，其寬度是根據(jù)列總數(shù)按照百分比規(guī)定的，每個(gè)柵格采用 float:left 浮動(dòng)樣式以讓其并排顯示六孵。其實(shí)float用于并排顯示div并不是固有的寫法纬黎，float的特點(diǎn)在于其脫離文檔流，浮動(dòng)在標(biāo)準(zhǔn)文檔流上方劫窒，但是在其周圍是某些元素的時(shí)候又占據(jù)一定位置本今，其實(shí)float的效果最直接實(shí)現(xiàn)的是word中 “文字環(huán)繞圖片” 的效果：
上述效果代碼：
<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應(yīng)用于div水平排列布局確實(shí)有些怪怪的，相關(guān)分析可以參考之前看過(guò)的一篇博客 CSS float浮動(dòng)的深入研究、詳解及拓展(二)
如果用float用作div水平排列诈泼，剛使用的時(shí)候最常見(jiàn)的一個(gè)問(wèn)題就是如下：
<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>
我們以為效果是這樣：
但是實(shí)際上懂拾，結(jié)果是這樣：
我們?cè)O(shè)置的浮動(dòng)元素根本就不在父元素內(nèi)容區(qū)域中，已經(jīng)全部溢出了铐达。因?yàn)楦冈貎?nèi)容默認(rèn)情況下的高度是子元素最高的高度岖赋，但是子元素都是float元素，子元素脫離了原先的文檔流瓮孙，不參與高度計(jì)算唐断，那么父元素的高度自然就是0。如果父元素后面還有內(nèi)容杭抠，float內(nèi)容會(huì)覆蓋其一部分脸甘，為了清除這個(gè)浮動(dòng)帶來(lái)的不便，需要清除浮動(dòng)偏灿，清除浮動(dòng)現(xiàn)在很多都在使用
:after 偽元素來(lái)幫助實(shí)現(xiàn)丹诀，具體方式如下：
.row:after{
display: block;
clear: both;
content: "";
}
使用 after 偽元素在父元素內(nèi)容區(qū)最后添加一個(gè)空內(nèi)容的塊元素，并設(shè)置塊元素左右都不允許有浮動(dòng)元素翁垂，這樣浮動(dòng)元素又 “回到” 了父元素的內(nèi)容區(qū)域铆遭。
使用 “回到” 的原因就是，其實(shí)采用這種方式沿猜，浮動(dòng)元素其實(shí)并沒(méi)有回到父元素的內(nèi)容區(qū)域中枚荣，只是父元素的內(nèi)容高度和浮動(dòng)元素高度相同而已。當(dāng)塊元素的 clear 屬性設(shè)置了左邊不能有浮動(dòng)元素時(shí)啼肩，那么這個(gè)時(shí)候其左邊如果有浮動(dòng)元素橄妆，這個(gè)元素的位置就會(huì)在浮動(dòng)元素的下方，而不是與浮動(dòng)元素平行祈坠。
上面代碼中
.row:after{
display: block;
clear: both;
content: "";
}
偽元素其實(shí)和浮動(dòng)元素不在同一行害碾，但是由于偽元素的內(nèi)容是空的，因此其并不占據(jù)高度颁虐，這個(gè)時(shí)候蛮原，父元素的內(nèi)容高度就變成了和浮動(dòng)元素高度相同，如果把偽元素的高度手動(dòng)設(shè)置后（上一幅圖）另绩，就可以很清楚地看到效果。并且由于設(shè)置了左右都不允許有浮動(dòng)元素花嘶，父元素之后如果還有其他浮動(dòng)元素笋籽，也不會(huì)和父元素中的子元素平行排列。目前這還是很方便的一種方式椭员。
