很多人都已經習慣稱之為清除浮動，以前我也一直這麼叫著，但是確切地來說是不準確的。應該叫閉合浮動。清除浮動：清除對應的單詞是 clear，對應css中的屬性是 clear：left | right | both | none；閉合浮動：更確切的含義是使浮動元素閉合，從而減少浮動帶來的影響。
浮動元素會導致它脫離文件流，致使父元素也看不到它，因而也不會包圍它。
先舉個栗子：
alt="我是"
/>
<
p>這是文字文件需要它定在右邊
p>
section
>
<
footer
> 這是最下面的footer元素也是經常**布局所涉及到的，上面的內容浮動後會導致它發生變化
footer
>
body
>
html
>
上面**顯示的頁面是這樣的
假設我們想要下面的文字定在的右側。那麼新增樣式img 讓左浮動。可是這麼做的結果是這樣的。。。。
媽呀！標題倒是跑到右邊了，可 section 也不再包圍浮動元素了，它只包圍非浮動的元素。於是， footer 被提了上來，緊挨著前乙個塊級元素—— section 。這樣是沒錯兒，可結果呢，不是我們想要的。
下面就是一些簡單的解決辦法：
1.為父元素新增 overflow:hidden
這個辦法很簡單，但是缺點是不太直觀，實際上， overflow:hidden 宣告的真正用途是防止包含元素被超大內容撐大，超出的部分會被剪下掉。除此之外， overflow:hidden 還有另乙個作用，即它能可靠地迫使父元素包含其浮動的子元素。
2.同時浮動父元素
第二種促使父元素包圍其浮動子元素的方法，是讓父元素也浮動起來，（要嗨一起嗨才行），浮動 section 以後，不管其子元素是否浮動，它都會緊緊地包圍（也稱收縮包裹）住它的子元素。因此，需要用 width:100% 再讓 section 與瀏覽器容器同寬。另外，由於 section 現在也浮動了，所以 footer 會努力往上擠到它旁邊去。為了強制 footer依然呆在 section 下方，要給它應用 clear:left 。被清除的元素不會被提公升到浮動元素的旁邊。
3.新增非浮動的清除元素
第三種強制父元素包含其浮動子元素的方法，就是給父元素的最後新增乙個非浮動的子元素，然後清除該子元素。由於包含元素一定會包圍非浮動的子元素，而且清除會讓這個子元素位於（清除一側）浮動元素的下方，因此包含元素一定會包含這個子元素——以及前面的浮動元素。在包含元素最後新增子元素作為清除元素的方式有兩種。
（1）第一種方式不太理想，也就是簡單地在 html 標記中新增乙個子元素，並給它應用clear 屬性。由於沒有預設的樣式，不會引入多餘空間， div 元素很適合這個目的。例如新增：
然後新增樣式.clear_me 。如果你特別不想新增這個純表現性元素，我再告訴你乙個用 css 來新增這個清除元素的方法。
（2）給section 新增乙個類，例如案例中，然後再給乙個clearfix規則。
.clearfix:after 這個 clearfix規則最早是由程式設計師 tony aslett 發明的，它只新增了乙個清除的包含句點作為非浮動元素（必須得有內容，而句點是最小的內容）規則中的其他宣告是為了確保這個偽元素沒有高度，而且在頁面上不可見。使用 clear:both 意味著 section 中新增的子元素會清除
左、右浮動元素從而位於左、右浮動元素下方。
這三種方法的使用要因地制宜。比如，不能在下拉列表的頂級元素上應用overflow:hidden ，否則作為其子元素的下拉列表就不會顯示了。因為下拉列表會顯示在其父元素區域的外部，而這恰恰是 overflow:hidden 所要阻止的。再比如，不能對已經靠自動外邊距居中的元素使用「浮動父元素」技術，否則它就不會再居中。
當然這三種方法最後的結果都是這樣的：
css清除浮動的幾種方法 清除浮動的方法有哪些？
為什麼使用浮動？浮動是一種常見的布局方式，當兩個或者多個塊級元素 塊級元素的特點是在文件中獨佔一行 需要並列為一行的時候，我們就需要加浮動 擴充套件知識，使塊級元素並列在一行的方式有很多種，比如使用display inline block,但是display inline block轉換出來的元素，...
清除浮動的幾種方法
1.浮動元素下加空div 為了統一樣式，我們新建乙個樣式選擇器class命名為 clear 並且對應選擇器樣式為 clear both 然後我們在父級 結束前加此div引入class clear 樣式。這樣即可清除浮動。這個class 清除float產生浮動，可以不用對父級設定高度 也無需技術父級高...
清除浮動的幾種方法
當元素浮動時，他將不再處於普通文件流中，相當於浮在文件之上，不佔據空間，但是會縮短行寬，產生文字環繞的效果。浮動帶來的影響 1，父級的高度塌陷 2.背景不能顯示 3.變框不能撐開 4.margin值不能正確顯示 5.產生文字環繞的效果 6.由於脫離文件流，不佔位，而後面的元素未脫離文件流導致後面的元...