為什么設置overflow為hidden可以清除浮動帶來的影響

JeOam 發布于2019-04-23 13:09 / 2910人閱讀

摘要：以下情況會觸發根元素的值不為的值為，，的值為，和中的任何一個的值不為和顯然我們在設置值為時使元素具有，那么子元素浮動便不會帶來父元素的高度坍塌影響。

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:

根元素
float的值不為none
overflow的值為auto，scroll，hidden
display的值為table-cell，table-caption和inline--block中的任何一個
position的值不為relative和static

顯然我們在設置overflow值為hidden時使container元素具有BFC，那么子元素child浮動便不會帶來父元素的高度坍塌影響。

5.總結

　　設置overflow為hidden使元素具有BFC而不會受子元素的影響，但是當子元素過多需要滾動顯示時，我們可以設置overflow的值為auto或acroll，超出父元素之外的元素會被隱藏。使用overflo:hidden也具有一定的局限性，所以我們應該根據具體的業務場景來選擇合適的方法。

?參考資料：

《CSS世界》-張鑫旭
overflow:hidden清除浮動原理解析及清除浮動常用方法總結

GPU云服務器云服務器 html浮動的影響清除浮動數據統計帶來什么物聯網將帶來什么

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1499.html

【前端Talkking】CSS系列——CSS深入理解之float浮動

摘要：包裹性所謂包裹性，其實是由包裹和自適應兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節中，如果子元素設置浮動屬性，則父元素就會出現高度塌陷的問題。 float屬性是CSS中常用的一個屬性，在實際工作中使用的非常多，如果使用不當就會出現意料之外的效果。雖然很多人說浮動會用就行、浮動過時了，但是對于優秀的前端開發人員，需要有刨根問底的精神，...

yankeys 2019-08-29 15:10 評論0 收藏0
css浮動現象及清除浮動的方法

css浮動現象及清除浮動的方法 ? 首先先明確浮動最初的定義及使用場景：實現文本環繞圖片的效果。除了用浮動外，目前暫無其他方法實現文本環繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動的具體定義：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不...

Kyxy 2019-08-29 16:29 評論0 收藏0
css浮動現象及清除浮動的方法

css浮動現象及清除浮動的方法 ? 首先先明確浮動最初的定義及使用場景：實現文本環繞圖片的效果。除了用浮動外，目前暫無其他方法實現文本環繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動的具體定義：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不...

weakish 2019-08-02 11:19 評論0 收藏0
CSS學習摘要-浮動與清除浮動

摘要：為了實現這個效果，我們需要清除浮動。元素被向下移動用于清除之前的左右浮動。塊格式化上下文對浮動定位與清除浮動都很重要。浮動定位和清除浮動時只會應用于同一個內的元素。且為了不影響接下來的文檔標準流，往往也要收尾做出清除浮動。以下從浮動到BFC的段落摘自MDN 網絡開發者float 浮動float CSS屬性指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。該元素從網頁的正常流...

番茄西紅柿 2019-04-23 13:40 評論0 收藏0