CSS定位元素--浮動與清除

浮動和清除是用來組織頁面佈局的又一柄利劍，這柄劍的劍刃就是 float 和 clear屬性。浮動，你看這倆字兒多形象，意思就是把元素從常規文檔流中拿出來。拿出來幹什麼？一是能夠實現傳統出版物上那種文字繞排圖片的效果，二是可讓原來上下堆疊的塊級元素，變成左右並列，從而實現佈局中的分欄。

浮動元素脫離了常規文檔流以後，原來緊跟其後的元素就會在空間容許的狀況下，向上提高到與浮動元素分庭抗禮。

若是浮動元素後面有兩個段落，而你只想讓第一段與浮動元素並列（就算旁邊還能放下第二段，也不想讓它上來），怎麼辦？用 clear 屬性來「清除」第二段，而後它就乖乖地呆在浮動元素下面了。

浮動

CSS 設計 float 屬性的主要目的，是爲了實現文本繞排圖片的效果。然而，這個屬性竟然也成了建立多欄佈局最簡單的方式。

1.文本繞排圖片

爲了實現文本繞排圖片的浮動效果，必須在標記中先寫圖片，而後再寫環繞它的文本。

<img …… />
<p>…the paragraph text…</p>
CSS 規則以下。
/*爲簡明起見，省略了字體聲明*/
p {margin:0; border:1px solid red;}
/*外邊距防止圖片緊挨文本*/
img {float:left; margin:0 4px 4px 0;}

以上規則會讓圖片浮動到左側，從而讓文本繞排到右側

--浮動非圖片元素時，必須給它設定寬度，不然後果難以預料。圖片無所謂，由於它自己有默認的寬度。

2.建立分欄

圍住浮動元素的三種方法

<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;}

--方法一：爲父元素添加 overflow:hidden

--第一個方法很簡單，缺點是不太直觀，即爲父元素應用 overflow:hidden，以強制它包圍浮動元素。

--實際上， overflow:hidden 聲明的真正用途是防止包含元素被超大內容撐大。應用overflow:hidden 以後，包含元素依然保持其設定的寬度，而超大的子內容則會被容器剪切掉。除此以外， overflow:hidden 還有另外一個做用，即它能可靠地迫使父元素包含其浮動的子元素。

--方法二：同時浮動父元素

--第二種促使父元素包圍其浮動子元素的方法，是也讓父元素浮動起來。

--方法三：添加非浮動的清除元素

--第三種強制父元素包含其浮動子元素的方法，就是給父元素的最後添加一個非浮動的子元素，而後清除該子元素。因爲包含元素必定會包圍非浮動的子元素，並且清除會讓這個子元素位於（清除一側）浮動元素的下方，所以包含元素必定會包含這個子元素——以及前面的浮動元素。在包含元素最後添加子元素做爲清除元素的方式有兩種。

方法一

第一種方式不太理想，也就是簡單地在 HTML 標記中添加一個子元素，並給它應用

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;}

方法二

再告訴你一個用 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:after {
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}

總結：要想強迫父元素包圍其浮動的子元素有三種方式

1.爲父元素應用 overflow:hidden

2.浮動父元素

3.在父元素內容的末尾添加非浮動元素，能夠直接在標記中加，也能夠經過給父元素添加 clearfix 類來加（固然，樣式表中得須要相應的 clearfix 規則）

沒有父元素時如何清除？

.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>