詳解為什么設(shè)置overflow為hidden可以清除浮動帶來的影響
我要評論1.問題起源
在平時的業(yè)務(wù)開發(fā)寫CSS中，為了滿足頁面布局，元素的浮動特性我們用的不能再多了。使用浮動的確能夠解決一些布局問題，但是也帶了一些副作用影響，比如，父元素高度塌陷，我們有好幾種可以清除浮動的方法，最常用的就是設(shè)置父元素的overflow:hidden這個屬性，每次在寫代碼的時候總是這樣寫，但是，自己從沒深度思考過這些寫為什么能夠清除浮動，最近，自己也查閱了一些資料，談?wù)勛约旱睦斫狻?/p>
2.情景再現(xiàn)
先上代碼：
<!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向左浮動，頁面展示效果如下：
結(jié)果來看，父元素只顯示了四個方向邊框的高度，背景顏色未顯示，這是因為子元素浮動脫離文檔流造成父元素高度塌陷。
3.解決方法
.container{
border: 1px solid #000;
background: #0f0;
overflow: hidden;
}
只在container父元素加了一行overflow:hidden
頁面展示效果如下：
父元素高度被撐起來了，背景顏色也顯示出來了。
4.BFC概念
我們先了解一個名詞：BFC（block formatting context），中文為“塊級格式化上下文”。
先記住一個原則： 如果一個元素具有BFC,那么內(nèi)部元素再怎么翻江倒海，翻云覆雨，都不會影響外面的元素。所以，BFC元素是不可能發(fā)生margin重疊的，因為margin重疊會影響外面的元素的；BFC元素也可以用來清楚浮動帶來的影響，因為如果不清楚，子元素浮動則會造成父元素高度塌陷，必然會影響后面元素的布局和定位，這顯然有違BFC元素的子元素不會影響外部元素的設(shè)定。
以下情況會觸發(fā)BFC:
- <html>根元素
- float的值不為none
- overflow的值為auto，scroll，hidden
- display的值為table-cell，table-caption和inline--block中的任何一個
- position的值不為relative和static
顯然我們在設(shè)置overflow值為hidden時使container元素具有BFC，那么子元素child浮動便不會帶來父元素的高度坍塌影響。
5.總結(jié)
設(shè)置overflow為hidden使元素具有BFC而不會受子元素的影響，但是當子元素過多需要滾動顯示時，我們可以設(shè)置overflow的值為auto或acroll，超出父元素之外的元素會被隱藏。使用overflo:hidden也具有一定的局限性，所以我們應(yīng)該根據(jù)具體的業(yè)務(wù)場景來選擇合適的方法。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
深入理解CSS overflow:hidden——溢出,坍塌,清除浮動
這篇文章主要介紹了深入理解CSS overflow:hidden——溢出,坍塌,清除浮動的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-03
