通過浮動可以使壹個元素向其父元素的左側或右側移動，我們使用float屬性來設置於元素的浮動
註意,元素設置浮動以後，水平布局的等式便不需要強制成立 。元素設置浮動以後，會完全從文檔流中脫離，不再占用文檔流的位置，所以元素下邊的還在文檔流中的元素會自動向上移動
（2）設置浮動以後元素會向父元素的左側或右側移動，
（3）浮動元素默認不會從父元素中移出
（4）浮動元素向左或向右移動時,不會超過它前邊的其他浮動元素
（5）如果浮動元素的上邊是壹個沒有浮動的塊元素，則浮動元素無法上移
（6）浮動元素不會超過它上邊的浮動的兄弟元素，最多最多就是和它壹樣高
實際上，浮動屬性壹開始創建出來的原因就是為了實現文字環繞的效果的，只是後來大家發現利用浮動可以很好地處理頁面布局的問題，所以現在更多時候是利用它來做布局的功能。。。
我們知道，塊元素和行內元素在文檔流中都有著各自的布局特點，比如塊元素獨占壹行等。那麽如果脫離了文檔流，塊元素和行內元素分別會有什麽樣的影響呢？
1、塊元素不在獨占頁面的壹行
2、脫離文檔流以後，塊元素的寬度和高度默認都被內容撐開
1、行內元素脫高文檔流以後會變成塊元素，特點和塊元素壹樣
也就是說，壹旦脫離文檔流以後，我們就不需要再區分塊和行內了。
我們可以看壹下下面的案例，在沒有使用 clear 屬性前，對於兩個兄弟元素，如果前者設置為浮動，那麽由於其脫離了文檔流，那麽後者就會移動到前者原先的位置上。如果我們不想元素受到其他元素的浮動影響，那麽就可以通過設置 clear 屬性來解決這個問題。
clear底層實現的原理是：設置清除浮動以後，瀏覽器會自動為元素添加壹個margin，以使其位置不受其他元素的影響
我們可以看下面這個案例，父 div 元素中包含著壹個設置為浮動的 div 子元素，由於子元素設置為浮動，脫離了文檔流，且父元素中沒有指定高度，所以此時壹旦子元素脫離了文檔流後，就缺少了支撐起父元素高度的元素。相比於這樣的效果，我們更希望即使子元素設置為浮動，但父元素依然可以包裹住子元素（或者說是有著子元素的高度，不至於塌陷）。
BFC(Block Formatting Context)塊級格式化環境
BFC是壹個css中的壹個隱含的屬性， 當元素開啟BFC後，該元素會變成壹個獨立的布局區域 。可以理解為，此時元素內的後代元素不會再把其他樣式傳遞到外面了。
元素開啟BFC後的特點;
1.開啟BFC的元素不會被浮動元素所覆蓋
2.開啟BFC的元素子元素和父元素外邊距不會重疊
3.開啟BFC的元素可以包含浮動的子元素
可以通過壹些特殊方式來開啟元素的BFC
1、設置元素的浮動（不推薦)
2、將元素設置為行內塊元素(不推薦)
需要註意的是，雖然開啟元素的BFC環境可以解決高度塌陷的問題，但是這還不是最完美的解決方案，在某些特殊的環境下還是會有問題。
我們回顧壹下，高度塌陷產生的原因是什麽？主要是因為父元素沒有設置高度，所以父元素的高度由子元素的高度決定，壹旦子元素設置為浮動後脫離了文檔流，那麽此時父元素就會由於沒有子元素的支撐而塌陷。
那麽如果我們能夠實現，手動在浮動的子元素後面放入壹個無內容的塊元素，且清除其受到的 float 影響，那麽此時這個塊元素就會落在浮動的元素下方，又由於（自身沒有設置高度的）父元素的高度由子元素的高度決定，所以此時父元素因為要包裹新增的無內容塊元素，也就自然可以包裹浮動的元素了。
所謂的clearfix樣式，其實核心就是在第二種解決方式的基礎上，對樣式做壹個進壹步的封裝，使其既可以解決高度塌陷的問題，還可以解決父子元素外邊距重疊的問題。