浮動和清除是用來組織頁面布局的又一柄利劍，這柄劍的劍刃就是float和clear屬性奕污。
浮動和清除是用來組織頁面布局的又一柄利劍萎羔，這柄劍的劍刃就是float和clear屬性。浮
動碳默，你看這倆字兒多形象贾陷，意思就是把元素從常規(guī)文檔流中拿出來缘眶。拿出來干什么？一是
可以實現(xiàn)傳統(tǒng)出版物上那種文字繞排圖片的效果髓废，二是可以讓原來上下堆疊的塊級元素巷懈，
變成左右并列，從而實現(xiàn)布局中的分欄瓦哎。
浮動元素脫離了常規(guī)文檔流之后砸喻，原來緊跟其后的元素就會在空間允許的情況下，向上提
升到與浮動元素平起平坐蒋譬。
浮動的第一個例子：
- 文本繞排圖片
為了實現(xiàn)文本繞排圖片的浮動效果割岛，必須在標記中先寫圖片，然后再寫環(huán)繞它的文本犯助。
<img …… />
<p>…the paragraph text…</p>
CSS規(guī)則如下：
/為簡明起見癣漆，省略了字體聲明/
p {margin:0; border:1px solid red;}
/外邊距防止圖片緊挨文本/
img {float:left; margin:0 4px 4px 0;}
以上規(guī)則會讓圖片浮動到左側(cè)，從而讓文本繞排到右側(cè)剂买。如下圖所示：
image.png
圖3-16 浮動圖片會從文檔流中被移除惠爽，如果在標記中有文本元素跟在它后面，則其中
的文本會繞開圖片
說得形象一點瞬哼，在你浮動一張圖片或者其他元素時婚肆，你是在要求瀏覽器把它往上方推，直
到它碰到父元素（也就是body元素）的內(nèi)邊界坐慰。后面的段落（帶灰色邊框）不再認為浮動
元素在文檔流中位于它的前面了较性，因而它會占據(jù)父元素左上角的位置。不過结胀，它的內(nèi)容
（文本）會繞開浮動的圖片赞咙。
*************************************************************************************************************************************A*
浮動非圖片元素時，必須給它設(shè)定寬度糟港，否則后果難以預(yù)料攀操。圖片無所謂，因為它本身
有默認的寬度秸抚。 - 創(chuàng)建分欄
在此基礎(chǔ)上創(chuàng)建多欄速和，只要再用一次float屬性，就這么簡單剥汤。如圖3-17所示健芭，只要給段落
設(shè)定寬度，然后也浮動它即可秀姐。
p {float:left; margin:0; width:200px; border:1px solid red;}
img {float:left; margin:0 4px 4px 0;}
image.png
你這樣同時浮動圖片和“有寬度的”段落慈迈，會導致段落的文本繞排效果消失，而浮動的段落
也會盡可能向左向上移動。就這樣痒留，這個段落就構(gòu)成了緊挨著圖片的一欄谴麦。這就是使
用float屬性創(chuàng)建多欄布局的原理。換句話說伸头，如果幾個相鄰的元素都具有設(shè)定的寬度匾效，都
是浮動的，而且水平空間也足以容納它們恤磷，它們就會并列排在一行面哼。
如果你創(chuàng)建了三個浮動、固定寬度的元素扫步，它們就會像這樣并排在一行魔策，構(gòu)成三欄布局的
框架。每個元素都可以作為容器河胎，包含其他元素闯袒。
3.圍住浮動元素的三種方法
浮動元素脫離了文檔流，其父元素也看不到它了游岳，因而也不會包圍它政敢。這種情況有時候并
非我們想要的，本節(jié)向大家傳授三種圍住浮動子元素的方法胚迫。記住喷户，這三種方法你都得掌
握，這樣才能審時度勢访锻，選擇最合適的一種摩骨。
為了演示浮動元素的行為，這種行為對布局會產(chǎn)生什么影響朗若，以及解決這個問題的三種方
法，我們首先要從一張帶標題的圖片開始昌罩。圖片和標簽包含在一個section元素中哭懈，
而section元素后面跟著一個footer元素【ビ茫可以把這個footer元素想象成很多網(wǎng)頁底部都
會有的與頁面同寬的頁腳遣总。
<section>
<img src="images/rubber_duck2.jpg">
<p>It’s fun to float.</p>
</section>
<footer> Here is the footer element that runs across the bottom of the page.</footer>
section {border:1px solid blue; margin:0 0 10px 0;}
/刪除默認的上下外邊距/
p {margin 0;}
/為簡明起見，省略了字體聲明/
footer {border:1px solid red;}
效果如下圖：
image.png
現(xiàn)在我們看到的是常規(guī)文檔流轨功，即塊級元素包圍著所有子元素旭斥，而且在頁面中自上而下相
互堆疊在一起。假設(shè)我們想讓圖片標題位于圖片右側(cè)古涧，而不是像現(xiàn)在這樣位于下方垂券。運用
剛剛學到的知識，我們知道實現(xiàn)這個目標最簡單的方式就是浮動圖片羡滑。
section {border:1px solid blue; margin:0 0 10px 0;}
img {float:left;}
footer {border:1px solid red;}
修改之后效果如下圖：
image.png
浮動圖片后標題跑到了右邊菇爪，但父元素section也收縮到只包含文本的高度高度
媽呀算芯！標題倒是跑到右邊了，可section也不再包圍浮動元素了凳宙，它只包圍非浮動的元
素熙揍。于是，footer被提了上來氏涩，緊挨著前一個塊級元素——section届囚。這樣是沒錯兒，可
結(jié)果呢是尖，不是我們想要的意系。
解決方法
方法一： 為父元素添加overflow:hidden
第一個方法很簡單，缺點是不太直觀析砸，即為父元素應(yīng)用overflow:hidden昔字，以強制它包圍
浮動元素。
section {border:1px solid blue; margin:0 0 10px 0; overflow:hidden;}
img {float:left;}
p {border:1px solid red;}
把overflow:hidden聲明應(yīng)用到容器元素后首繁，footer又回到了我們期望的位置作郭，如下圖：
實際上，overflow:hidden聲明的真正用途是防止包含元素被超大內(nèi)容撐大弦疮。應(yīng)
用overflow:hidden之后夹攒，包含元素依然保持其設(shè)定的寬度，而超大的子內(nèi)容則會被容
器剪切掉胁塞。除此之外咏尝，overflow:hidden還有另一個作用，即它能可靠地迫使父元素包
含其浮動的子元素啸罢。
方法二 ： 同時浮動父元素
第二種促使父元素包圍其浮動子元素的方法编检，是也讓父元素浮動起來。
section {border:1px solid blue; float:left; width:100%;}
img {float:left;}
footer {border:1px solid red; clear:left;}
浮動section以后扰才，不管其子元素是否浮動允懂，它都會緊緊地包圍（也稱收縮包裹）住它的
子元素。因此衩匣，需要用width:100%再讓section與瀏覽器容器同寬蕾总。另外，由于section
現(xiàn)在也浮動了琅捏，所以footer會努力往上擠到它旁邊去生百。為了強制footer依然呆在section
下方，要給它應(yīng)用clear:left柄延。被清除的元素不會被提升到浮動元素的旁邊蚀浆。
方法三：添加非浮動的清除元素
第三種強制父元素包含其浮動子元素的方法，就是給父元素的最后添加一個非浮動的子元
素，然后清除該子元素蜡坊。由于包含元素一定會包圍非浮動的子元素杠输，而且清除會讓這個子
元素位于（清除一側(cè)）浮動元素的下方，因此包含元素一定會包含這個子元素——以及前
面的浮動元素秕衙。在包含元素最后添加子元素作為清除元素的方式有兩種蠢甲。
第一種方式不太理想，也就是簡單地在HTML標記中添加一個子元素据忘，并給它應(yīng)用clear屬
性鹦牛。由于沒有默認的樣式，不會引入多余空間勇吊，div元素很適合這個目的曼追。
<section>
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
<div class="clear_me"></div>
</section>
<footer> Here is the footer element…</footer>
在此，我為div添加了一個類汉规，以便于在CSS中添加它礼殊。
section {border:1px solid blue;}
img {float:left;}
.clear_me {clear:left;}
footer {border:1px solid red;}
這樣，浮動的元素被父元素包圍住了针史。
如果你特別不想添加這個純表
現(xiàn)性元素晶伦，我再告訴你一個用CSS來添加這個清除元素的方法。首先啄枕，要給section添加一
個類婚陪。
<section class="clearfix">
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
</section>
<footer> Here is the footer element…</footer>
然后，再使用這個神奇的clearfix規(guī)則频祝！
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
好了泌参，該回過頭來作個總結(jié)了。要想強迫父元素包圍其浮動的子元素有三種方式常空，哪三
種沽一？
為父元素應(yīng)用overflow:hidden
浮動父元素
在父元素內(nèi)容的末尾添加非浮動元素，可以直接在標記中加漓糙，也可以通過給父元素添
加clearfix類來加（當然铣缠，樣式表中得需要相應(yīng)的clearfix規(guī)則）
這三種方法的使用要因地制宜。比如兼蜈，不能在下拉菜單的頂級元素上應(yīng)
用overflow:hidden，否則作為其子元素的下拉菜單就不會顯示了拙友。因為下拉菜單會顯示
在其父元素區(qū)域的外部为狸，而這恰恰是overflow:hidden所要阻止的。再比如遗契，不能對已經(jīng)
靠自動外邊距居中的元素使用“浮動父元素”技術(shù)辐棒，否則它就不會再居中，而是根據(jù)浮動值
浮動到左邊或右邊了⊙總之泰涂，掌握了這三種技術(shù)之后，再碰到需要包圍浮動元素的情況辐怕，
你就能夠游刃有余了逼蒙。
實例 ：
當我們遇到多個元素向上浮動
如下圖所示：
其中包含6個元素：3張圖片和介紹它們的3個文本段落。這個頁面布局是通過浮動圖片實現(xiàn)的寄疏，因此在標記中跟在圖片后面的文本會向
上走是牢，停靠在浮動圖片的右側(cè)陕截。
由于第二段文字下方有空間驳棱，所以第三張圖片及說明文字會上浮到第二張圖片右側(cè)，這不是我們想要的結(jié)果
<section>
<img src="images/rubber_duck3.jpg">
<p>This text sits next to the image and because the…</p>
<img src="images/beach_ball.jpg">
<p>This text is short, so the next image can float up…</p>
<img src="images/yellow_float.jpg">
<p>Because the previous image’s text does not…</p>
</section>
我使用clearfix規(guī)則修改
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
像這樣給每個段落都加上clearfix類：
<section>
<img src="images/rubber_duck3.jpg">
<p class="clearfix">This text sits next to the image and because the…</p>
<img src="images/beach_ball.jpg">
<p class="clearfix">This text is short, so the next image can float up…</p>
<img src="images/yellow_float.jpg">
<p class="clearfix">Because the previous image’s text does not…</p>.
</section>
