1.探究圖片環(huán)繞文字的傳說
在深入了解float之前，相信大家都聽過一個傳說涂炎，就是float被設(shè)計出來的目的是為了實(shí)現(xiàn)文字環(huán)繞圖片的效果忠聚，可能是初學(xué)的時候忘了，還是受了“清浮動”的毒璧尸，我自己都忘了有沒有用float去實(shí)現(xiàn)過這個效果咒林。因此下面我們先來實(shí)現(xiàn)一下float的設(shè)計初衷熬拒，文字環(huán)繞圖片效果爷光。
<div style="width: 200px">
<div style="float: left;">
<img width="100" height="100" src="../小和尚.jpg">
</div>
<p>我想實(shí)現(xiàn)文字環(huán)繞，因此需要多一些文字看一下效果我想實(shí)現(xiàn)文字環(huán)繞澎粟，因此需要多一些文字看一下效果</p>
</div>
非常簡單的一段代碼蛀序，也不需要什么牛逼哄哄的操作，float就幫助我們實(shí)現(xiàn)了文字環(huán)繞圖片的效果活烙。為了實(shí)現(xiàn)這種效果徐裸，CSS設(shè)計師在設(shè)計float屬性的時候定義了float的兩個特性。
（1）“破壞文檔流”啸盏，使得父元素得高度塌陷重贺。
（2）禁止行框盒子與浮動元素發(fā)生重疊。
下面我們結(jié)合這兩個特性回懦，來說說圖片是如何環(huán)繞文字的气笙。第一點(diǎn)，破壞文檔流怯晕，使得父元素高度塌陷潜圃，這個時候，我們的p標(biāo)簽作為一個block元素舟茶，肯定是想著我要填滿父容器的寬度谭期，而事實(shí)上堵第，塊級元素也是不辱使命的完成了自己的任務(wù)，我們可以給塊級標(biāo)簽加個背景色隧出，然后把圖片搞成小透明踏志，看一下是不是這樣。
果然鸳劳，第一個條件生效了狰贯，然而高度塌陷只是讓浮動元素和塊級元素在一個水平線上了，如何實(shí)現(xiàn)文字環(huán)繞效果呢赏廓？這個時候就需要我們的第二個屬性出場了涵紊，就是float元素禁止與行框盒子發(fā)生重疊（個人認(rèn)為這是float和絕對定位的最大區(qū)別之一），對“行框盒子”還不理解的童鞋請轉(zhuǎn)內(nèi)聯(lián)元素那章幔摸。注意摸柄，我特意強(qiáng)調(diào)了行框盒子，也就是本例中匿名內(nèi)聯(lián)元素生成的每一行既忆，這個跟塊級元素的盒子沒有半毛錢關(guān)系驱负。為了驗(yàn)證這個想法，我們可以把p標(biāo)簽轉(zhuǎn)化成內(nèi)聯(lián)元素（display:inline)看下效果患雇。為了看上去更明顯跃脊，我把圖片的透明度設(shè)成了0，可以看到苛吱，浮動元素確實(shí)是和行框盒子發(fā)生了不重疊的關(guān)系酪术。-
至此，我們已經(jīng)完全了解了那個float的傳說翠储。
2.浮動錨點(diǎn)和浮動參考绘雁？聽都沒聽過！
我估計在座的各位和我一樣（是個辣雞）援所，都是第一次聽說浮動錨點(diǎn)和浮動參考庐舟，更別說去了解特么的概念了。干巴巴的講概念在CSS世界里根本行不通住拭，很多東西都要通過實(shí)踐挪略，確認(rèn)過眼神才能夠去猜測其內(nèi)部的原理雷蹂。那么我們就通過一個例子來了解一下這兩個概念游岳。
<!-- 測試浮動參考 -->
<div style="width: 200px;text-align: justify;background: yellow">
<span>這里有很多文字，且要超出一行且要超出一行且要超出一行</span>
<span style="float: right;color:blue">更多</span>
</div>
首先上面這個例子伶氢，文字超出一行的時候澈蟆，浮動元素會浮在哪兒墨辛？是文字的第一行？還是文字的最后一行趴俘？還是隨便付么亍奏赘？答案是，最后一行太惠，看一下具體效果就知道了磨淌。
由于markdown編輯器支持標(biāo)簽語言，因此我們可以直接預(yù)覽最終效果如下（小提示：你可以通過瀏覽器直接檢查下面的元素看到CSS樣式）
結(jié)果已經(jīng)出來了凿渊，那么梁只，為什么呢？
這個時候就要邀請我們的浮動參考出場了埃脏。浮動參考搪锣，顧名思義，就是指float元素要對齊參考的實(shí)體是誰彩掐？
在CSS世界中构舟，float元素的浮動參考是“行框盒子”，這個行框盒子特么又出來了堵幽，怎么感覺哪兒都有它狗超。注意是行框盒子，跟其父容器子元素等等等等都沒半毛錢關(guān)系朴下。這里作者溫馨提示努咐，在新的標(biāo)準(zhǔn)中，float的浮動參考不僅僅是行框盒子殴胧，但他沒有展開渗稍，我也懶得查閱，就當(dāng)留個懸念溃肪。知道了浮動參考的概念后免胃，我們就可以解釋上面這個例子了音五，由于float元素是參考行框盒子對齊的惫撰，因此，float可能在第一行躺涝，也可能在第二行厨钻，為什么在第三行呢？
這里其實(shí)作者沒有說明坚嗜，我提出一個假設(shè)夯膀，就是浮動元素參考的是離他最近的行框盒子，這個觀點(diǎn)由本人提出苍蔬，由本人驗(yàn)證后發(fā)現(xiàn)事實(shí)就是這樣诱建，所以有時候CSS的世界就是瞎猜一通然后驗(yàn)證。下面我來簡單驗(yàn)證一下這個觀點(diǎn)碟绑，其實(shí)很簡單俺猿，只要把浮動元素放到span標(biāo)簽前面就可以了茎匠。如下所示
<!-- 驗(yàn)證浮動參考是離他最近的行框盒子 -->
<div style="width: 200px;text-align: justify;background: yellow">
<span style="float: right;color:blue">更多</span>
<span>這里有很多文字，且要超出一行且要超出一行且要超出一行</span>
</div>
由于markdown編輯器支持標(biāo)簽語言押袍，因此我們可以直接預(yù)覽最終效果如下（小提示：你可以通過瀏覽器直接檢查下面的元素看到CSS樣式）
結(jié)果完全印證了我的想法是正確的诵冒，我吹爆我自己！
說完了浮動參考谊惭，那么什么是浮動錨點(diǎn)汽馋？浮動錨點(diǎn)是float元素所在流中的一個點(diǎn)，你可以理解為是一個空的內(nèi)聯(lián)元素圈盔，為什么要有這個點(diǎn)呢豹芯？道理很簡單，有時候我們的浮動元素沒有可以參考的行框盒子驱敲，也就是他的四周都被一群block大漢包圍的時候該怎么辦告组？往哪里定位？沒有關(guān)系癌佩，他自己帶一個可以參考的浮動錨點(diǎn)木缝。由于這個屬性沒什么特殊之處，這里就不過多介紹了围辙，了解一下就好我碟。
3.那些年你被騙過的clear“清浮動”
相信我們初學(xué)浮動的第一課便被灌輸了“浮動”破壞文檔流是個禍害的思想，為了解決浮動元素導(dǎo)致高度坍塌的“bug”姚建，我們被要求清浮動矫俺。然后給了一大堆清浮動的方法，最后提出最好用的是after偽類清浮動掸冤，當(dāng)時還真覺得煞有其是厘托，現(xiàn)在看來真的是人言可畏。如果CSS自家制定的標(biāo)準(zhǔn)都被當(dāng)作了bug稿湿，那還有什么不是bug呢铅匹？
看完這一章后，你應(yīng)該可以明白兩個概念：第一饺藤，浮動引起的高度坍塌是為了解決圖文環(huán)繞效果而被制定的標(biāo)準(zhǔn)包斑，并不是所謂的bug。第二涕俗，所謂的clear清浮動罗丰，并沒有清除掉浮動。
為什么說clear沒有清除掉浮動呢再姑？從字面意思上理解萌抵，clear確實(shí)是清除的意思，然而官方對于clear的解釋是：元素盒子的邊不能和前面的浮動元素相鄰。
這句話聽起來很拗口绍填，但可以明確的知道萎坷，clear并沒有改變?nèi)魏胃釉氐奶匦裕釉匾琅f是那個浮動元素沐兰，不管你清不清哆档，他還是在那邊，浮著住闯。
那么這句話的涵義是什么呢瓜浸？仔細(xì)剖析一下，你會發(fā)現(xiàn)比原，“清浮動”的奧秘就在于這個不能相鄰的標(biāo)準(zhǔn)插佛。事實(shí)上，clear被制定出來就是為了解決口耳相傳的“高度坍塌bug”量窘，因此浮動元素本身的特性被完美保留雇寇。概念講的干了，來看一個例子吧
<!-- 清浮動原理探究 -->
<div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
</div>
<style>
.li{
float: left;
margin: 10px;
width: 40px;
height: 40px;
background: yellow
}
.li:nth-of-type(3){
clear: both;
}
</style>
上面這個例子蚌铜，最終li會被清浮動分割成幾行锨侯？
最終結(jié)果是：兩行。由于markdown編輯器支持標(biāo)簽語言冬殃，因此我們可以直接預(yù)覽最終效果如下（小提示：你可以通過瀏覽器直接檢查下面的元素看到CSS樣式）
我們用所學(xué)的理論知識來解釋下為什么是兩行囚痴，在樣式表中，第三個浮動元素使用了清浮動的屬性审葬，此時深滚，根據(jù)標(biāo)準(zhǔn)，當(dāng)前元素不能和前面的浮動元素相鄰涣觉，也就是第三個元素不能和第二個元素做朋友了痴荐，那只能換行了，然而標(biāo)準(zhǔn)沒有規(guī)定第三個元素不能和后面的元素做朋友官册，因此第三個元素以及之后的元素依舊保持左浮動的特性規(guī)則排列生兆。由于第一行和第二行都保持了浮動的特性，因此高度全部坍塌攀隔，此時父級容器div的高度依舊是0皂贩，不會因?yàn)榍辶烁悠苷ィ溉萜鞯母叨染妥兂傻谝恍械母叨攘死バ冢溉萜鞲叨纫琅f是0！注意是0婴栽！(由于我直接用了標(biāo)簽去展示結(jié)果满粗，父元素高度坍塌會導(dǎo)致文章排版出問題，因此F12檢查元素的時候會發(fā)現(xiàn)父元素高度不是0愚争，是因?yàn)槔昧薆FC特性加了overflow映皆，這個在下一章會詳細(xì)探討)
看完了上面的例子挤聘，再來簡單了解下clear的四個屬性，分別是none(默認(rèn)捅彻，就是沒有)组去，left（清左浮動），right（清右浮動）以及我們最常用的both(全清)步淹。作者這里給出了clear的基本使用方式就是clear:both从隆。left和right屬性根本沒有軟用，讓CSS自己判斷就好了缭裆，因?yàn)椴豢赡苡幸粋€元素既是left又是right浮動的键闺，因此無需考慮是清左浮動還是右浮動，全清就完事了澈驼。
由于clear只能確保和前面的元素發(fā)生關(guān)系辛燥，因此我們最常使用的是after偽類清浮動，而不是before缝其，因?yàn)閎efore生成的元素根本沒法和后面的元素交流clear的事情挎塌。最后我們放上我們最喜歡使用的after偽類清浮動的方法，注意clear屬性只有塊級元素才有效内边，而偽類的默認(rèn)屬性是內(nèi)聯(lián)值勃蜘，不要忘了display:block申明。
<div class="clearfix">
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
</div>
<style>
.li{
float: left;
margin: 10px;
width: 40px;
height: 40px;
background: yellow
}
.li:nth-of-type(3){
clear: both;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
</style>
復(fù)制代碼
本章到這里其實(shí)還沒有結(jié)束假残，下一章的內(nèi)容會繼續(xù)探討float的BFC特性缭贡，以及如何用overflow真正的清除浮動。
最后辉懒，給大家推薦一個前端學(xué)習(xí)進(jìn)階內(nèi)推交流群685910553（前端資料分享）阳惹，不管你在地球哪個方位，
不管你參加工作幾年都?xì)g迎你的入駐？袅（群內(nèi)會定期免費(fèi)提供一些群主收藏的免費(fèi)學(xué)習(xí)書籍資料以及整理好的面試題和答案文檔Ｓㄌ馈）
如果您對這個文章有任何異議，那么請在文章評論處寫上你的評論颠印。
如果您覺得這個文章有意思纲岭，那么請分享并轉(zhuǎn)發(fā)，或者也可以關(guān)注一下表示您對我們文章的認(rèn)可與鼓勵线罕。
愿大家都能在編程這條路止潮，越走越遠(yuǎn)。
