###寫在前面
本篇文章是個人通過對css源文件的學習，閱讀前輩的部落格，以及個人在碼**的過程中的理解。
###1.浮動的設計初衷
其實浮動的在設計之始只是為了進行**混排檢視官方文件，css3官網，後來碼農們發現用來幾個盒子併排顯示有奇效，才逐漸發展為用來進行網頁布局。
例項展示
加float:left;前後的效果
**如下
可以很明顯發現，新增浮動後藍色框脫離了普通的文字流，相當於浮起來了，（這裡需要注意的是，新增浮動後，無論之前是inline元素，亦或是block元素，都將轉化為display:block元素 ） ， 黑色盒子就會忽略藍色盒子往上移動，雖然浮動元素脫離了普通的文字流，但是會 佔據body位子，因此文字就像被擠開了一樣，最後環繞排列。
1）影響後續布局（特別是行內元素）
浮動後相當於行內元素挨著排列，排不下後就換行排，有些時候就會出現這種情況，會沿著div4底端水平對齊，導致有個空白區域無法去掉。
2）父元素塌陷
當子元素全部浮動後，父元素內部沒有內容去撐開，就會出現黑色框上下邊框挨在一起，高度塌陷後，無法正常顯示background-image，border等屬性。
###3.有浮動就要清除浮動
清除浮動或者解決父元素高度塌陷，影響後續布局的解決方案
1）給父元素設定高度（推薦指數：★ ★）
既然沒了高度就人為設定乙個
2）父元素浮動（推薦指數：0）
這種方法不推薦，都浮動後，不利於父級的布局。
3）display:inline-block（推薦指數：★ ★）
不採用float的方法，用行內元素布局，同樣可以將多個盒子同行排列，但是會有一些不知所謂的邊距。
後面3種方法則是採取清除浮動的方法
4）overflow：hidden；（推薦指數：★ ★★ ★）
overflow:hidden;
float：left;
// zoom:1用於相容ie6。
其實主要是這兩行**在一起觸發了一種瀏覽器預設機制bfc（(block formatting context）直譯為"塊級格式化上下文",想詳細了解的同學這裡，個人覺得這個前輩講的比較清楚。
5）設定clear:both；樣式（推薦指數：★ ★★ ★）
在父元素末尾新增乙個空盒子
其實他的機制就是clear:both的空盒子兩邊不能存在浮動元素，正常情況下，他是在其他浮動元素下面，會被遮擋，但是有了這個屬性後，就會往下移動，直到不被浮動元素覆蓋為止，它又和其他浮動元素在同乙個父元素下面，父元素要包裹它，因此就被拉大了，高度自然就有了。
6）偽元素::after或者偽類:after（推薦指數：★ ★★ ★★）
給父級元素設定偽類，偽元素即可清除浮動，機制與上一種方法類似。
好了這就是目前我對浮動的理解，各位小夥伴如果發現有更好的理解，歡迎建議！
對css浮動的理解以及清除浮動
首先我們要了解什麼是浮動，在css中浮動就是使元素及元素內容脫離文件流，並且使其移動到其父元素的最左或最右邊。移動到其父元素的最左或最右邊 是指向左或向右移動直至碰到另乙個浮動元素或是父元素的邊界 不包括padding 如何清除浮動？通常我們最普遍的作法是直接清除浮動 clear both 但是這樣...
浮動理解及清除浮動
浮動是css裡布局使用最多的屬性。浮動之後，元素會脫離文件流，緊貼上乙個浮動盒子的邊。一旦我們設定了浮動，那麼該元素就能夠併排展示，而且可以設定寬和高。float right float left 浮動元素會緊貼上乙個浮動元素。若寬度不夠，會換行。頂部頂帖上乙個浮動元素的底部。浮動方向是要一直。di...
對CSS浮動屬性以及清除浮動的理解
所謂的css 的 float 浮動 有兩種屬性值，第一種是左浮動 float left 該屬性會使元素向左移動，周圍的元素則會根據此元素的位置散布在其周圍。另一種是右浮動 float right 會使元素向左或向右移動，該屬性會使元素向左移動，周圍的元素則會根據此元素的位置散布在其周圍。我們先新建乙...