1.問題起源
在平時的業務開發寫CSS中，為了滿足頁面布局，元素的浮動特性我們用的不能再多了。使用浮動的確能夠解決一些布局問題，但是也帶了一些副作用影響，比如，父元素高度塌陷，我們有好幾種可以清除浮動的方法，最常用的就是設置父元素的overflow:hidden這個屬性，每次在寫代碼的時候總是這樣寫，但是，自己從沒深度思考過這些寫為什么能夠清除浮動，最近，自己也查閱了一些資料，談談自己的理解。
2.情景再現
先上代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>清除浮動</title> <style> .container{ border: 1px solid #000; background: #0f0; } .child{ float: left; } </style></head><body><div class="container"> <div class="child"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam dolorem eligendi laudantium libero magnam magni numquam voluptas voluptatem voluptatibus? Consequuntur delectus dolorem esse explicabo minus neque non quaerat voluptatum! </div></div></body></html>代碼很簡單，就是父元素container里面包含了一個子div元素child，然后我們使子元素的div向左浮動，頁面展示效果如下：
結果來看，父元素只顯示了四個方向邊框的高度，背景顏色未顯示，這是因為子元素浮動脫離文檔流造成父元素高度塌陷。
3.解決方法
.container{ border: 1px solid #000; background: #0f0; overflow: hidden; }只在container父元素加了一行overflow:hidden
頁面展示效果如下：
父元素高度被撐起來了，背景顏色也顯示出來了。
4.BFC概念
我們先了解一個名詞：BFC（block formatting context），中文為“塊級格式化上下文”。
先記住一個原則： 如果一個元素具有BFC,那么內部元素再怎么翻江倒海，翻云覆雨，都不會影響外面的元素。所以，BFC元素是不可能發生margin重疊的，因為margin重疊會影響外面的元素的；BFC元素也可以用來清楚浮動帶來的影響，因為如果不清楚，子元素浮動則會造成父元素高度塌陷，必然會影響后面元素的布局和定位，這顯然有違BFC元素的子元素不會影響外部元素的設定。
以下情況會觸發BFC:
顯然我們在設置overflow值為hidden時使container元素具有BFC，那么子元素child浮動便不會帶來父元素的高度坍塌影響。
5.總結
設置overflow為hidden使元素具有BFC而不會受子元素的影響，但是當子元素過多需要滾動顯示時，我們可以設置overflow的值為auto或acroll，超出父元素之外的元素會被隱藏。使用overflo:hidden也具有一定的局限性，所以我們應該根據具體的業務場景來選擇合適的方法。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
