## 前言 css中的浮動向來是前端入門必備的知識點，也是在面試中都會提及的點，有些人也可以用簡單的overflow:hidden來解決浮動帶來的顯示問題。但作為一名優秀的前端，必須對浮動做到知根知底。 ## 浮動的概念 通常為了使塊級元素能夠水平排列，我們會將需要這樣顯示的元素設置浮動來實現需要的效果。常用的浮動有左浮動，右浮動，以及none.對應的css 屬性為：float:left;right;none. ## 注意事項 1. 使用浮動的元素必須為塊級元素，對于行級元素以及行內塊級設置浮動是沒有意義的，因為行級和行內塊級本來就是水平排列 注意浮動的順序，如果按照左浮動，會按照文檔的代碼順序從左到右顯示，如果為右浮動，會從右到左，按照自己的設計稿效果，選擇正確的浮動方式 1. 使用浮動的塊級元素必須設置正確的寬高，如果不設置，塊級元素默認為父元素的寬度，即使設置了浮動，視覺效果也是不浮動的。設置正確的寬高后，當同一行放不下最后一個元素時，會放到下一行繼續水平排列 設置浮動后，會脫離標準的文檔流，需要在浮動結束之后，清除浮動 ## 引發問題 1. 父元素盒子模型得不到正確的寬高，導致邊框、內邊距錯誤 2. 父元素盒模型不正確導致的相關顯示屬性，如父元素的背景，根據父元素定位的元素 3. 父元素盒模型不正確導致的父元素之后的元素錯位 ## 清除浮動 1. 浮動元素能確認高寬的情況下，對父元素的高寬進行設定 2. 設置父元素overflow:hidden或者auto 3. 設置父元素為浮動，也可以重新獲取高度 4. 設置父元素的偽元素來實現 5. 清除浮動全局樣式 ``` css .clearfloat:after { display: block; clear: both; content: ""; visibility: hidden; height: 0 } .clearfloat { zoom: 1 } ``` 6\. 父元素設置寬度之后，設置display:table 7\. 父元素末尾追加br標簽 ，內置clear:both ## 總結 綜上 ，清除浮動最簡單的方式是overflow:hidden（推薦）,最官方的寫法是寫一個全局的清除浮動樣式（可能瀏覽器支持不好）