自從工作了之後就沒更新博客。 工作了之後從事了前端和後臺的工作， 好多事情都要從頭開始學。
剛入職不久就丟了不少很雜碎的任務給我。在剛開始調樣式的時候覺得好心累， 感覺都控制不了那些樣式， 又不能像做Android的XML界面那樣拖來拖去， 好煩。
今天接觸了一天float， 感覺還是挺多學問的。
浮動的規則：
浮動有四個屬性值可以設置：
<span style="font-size:14px;">.foo{
float: left | right | inherit | none
}</span>
每個屬性值是如何影響浮動元素在其父元素或文檔內的擺放，通常是由下面的規則決定的：
浮動元素的父元素是不可見的.
浮動元素會脫離文檔流，不會繼續停留在其父元素內。如果一個父元素只有一個子元素，那麼它將會塌陷，就像是空的一樣。就表現而言，就有點類似於子元素做了絕對定位。
<span style="font-size:14px;">.parent {
position: relative;
padding: 10px;
}
.child {
float: left
}</span>
左浮動/右浮動元素會盡量接近父元素的頂部和左邊/右邊
這是左浮動/右浮動元素試圖實現的“最佳”位置。
前面的元素會將浮動元素向下推。
雖然浮動元素會盡量靠近父元素的頂部，然而文檔中浮動元素前面的兄弟元素會把浮動元素向下推。無論前面的元素是內聯元素還是塊元素。也就是說如果我們在浮動元素之前或之後有一個段落，會得到不同的結果。
段落在浮動元素之後
段落在浮動元素之前
前面的浮動元素得到更“好”的位置。
在規則2中講到的“最佳”的位置將會給第一個被定義爲浮動的元素。比如說，有多個右浮動元素，HTML中第一個定義的右浮動元素會最靠近右邊, 因爲那是最佳位置。
<span style="font-size:14px;"><div class="container">
<div class="right">1</div>
<div class="right">2</div>
<div class="right">3</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div></span>
接近於父元素的頂部優先於左邊/右邊
當有多個浮動元素向同一個方向浮動時，隨後的元素爲了更接近父元素的頂部，將會選擇遠離父元素左邊/右邊的位置。
這就意味着多個浮動元素將儘可能並排排列，只有當父元素的寬度不能容納它們，它們纔會移動到下面。
在這個例子中，元素2比元素3擁有更好的位置
浮動元素不能延伸到它的父元素外面
左浮動的元素不會延伸到父元素的左邊緣外。 左浮動的元素不應該延伸到父元素的右外邊緣外，除非父元素沒有剩餘的空間。
清除浮動
clear 屬性與 float 密切相關。它可以消除元素浮動造成的文檔流的改變。它有三個屬性值：
<span style="font-size:14px;">.foo {
clear: left | right | both
}</span>
段落清除左浮動
如果一個元素只是清除左浮動或右浮動，另一方向浮動的元素不會受此影響。
<span style="font-size:14px;"><div class="container">
<div class="left">1</div>
<div class="left">2</div>
<div class="left">3</div>
<div class="right">1</div>
<div class="right">2</div>
<div class="right">3</div>
<p class="clear-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div></span>
clearfix
先前有許多混亂而不合適的清浮動方法。特別是會在一些老舊瀏覽器導致問題。我用的一個流行的清浮動方案是用CSS實現的。下面的樣式應用於浮動元素的父元素或緊隨其後的兄弟元素。
<span style="font-size:14px;">.cf::after {
content:"";
display:table;
clear:both;
}</span>