詳解爲何設置overflow爲hidden能夠清除浮動帶來的影響

時間 2019-11-08

標籤詳解爲何設置 overflow hidden 能夠清除浮動帶來影響简体版

原文原文鏈接

1.問題起源css

在平時的業務開發寫CSS中，爲了知足頁面佈局，元素的浮動特性咱們用的不能再多了。使用浮動的確可以解決一些佈局問題，可是也帶了一些反作用影響，好比，父元素高度塌陷，咱們有好幾種能夠清除浮動的方法，最經常使用的就是設置父元素的overflow:hidden這個屬性，每次在寫代碼的時候老是這樣寫，可是，本身從沒深度思考過這些寫爲何可以清除浮動，最近，本身也查閱了一些資料，談談本身的理解。html

2.情景再現佈局

先上代碼：spa

<!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">
  你好
 </div>
</div>
</body>
</html>

代碼很簡單，就是父元素container裏面包含了一個子div元素child，而後咱們使子元素的div向左浮動，結果來看，父元素只顯示了四個方向邊框的高度，背景顏色未顯示，這是由於子元素浮動脫離文檔流形成父元素高度塌陷。.net

3.解決方法code

.container{
     border: 1px solid #000;
     background: #0f0;
     overflow: hidden;
   }

只在container父元素加了一行overflow:hiddenorm

父元素高度被撐起來了，背景顏色也顯示出來了。htm

4.BFC概念blog

咱們先了解一個名詞：BFC（block formatting context），中文爲「塊級格式化上下文」。開發

先記住一個原則：若是一個元素具備BFC,那麼內部元素再怎麼翻江倒海，翻雲覆雨，都不會影響外面的元素。因此，BFC元素是不可能發生margin重疊的，由於margin重疊會影響外面的元素的；BFC元素也能夠用來清除浮動帶來的影響，由於若是不清楚，子元素浮動則會形成父元素高度塌陷，必然會影響後面元素的佈局和定位，這顯然有違BFC元素的子元素不會影響外部元素的設定。

如下狀況會觸發BFC: