成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

為什么設(shè)置overflow為hidden可以清除浮動(dòng)帶來(lái)的影響

JeOam / 2943人閱讀

摘要：以下情況會(huì)觸發(fā)根元素的值不為的值為，，的值為，和中的任何一個(gè)的值不為和顯然我們?cè)谠O(shè)置值為時(shí)使元素具有，那么子元素浮動(dòng)便不會(huì)帶來(lái)父元素的高度坍塌影響。

1.問題起源　　

　　在平時(shí)的業(yè)務(wù)開發(fā)寫CSS中，為了滿足頁(yè)面布局，元素的浮動(dòng)特性我們用的不能再多了。使用浮動(dòng)的確能夠解決一些布局問題，但是也帶了一些副作用影響，比如，父元素高度塌陷，我們有好幾種可以清除浮動(dòng)的方法，最常用的就是設(shè)置父元素的overflow:hidden這個(gè)屬性，每次在寫代碼的時(shí)候總是這樣寫，但是，自己從沒深度思考過(guò)這些寫為什么能夠清除浮動(dòng)，最近，自己也查閱了一些資料，談?wù)勛约旱睦斫狻?/p>

2.情景再現(xiàn)

先上代碼：

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮動(dòng)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>

??代碼很簡(jiǎn)單，就是父元素container里面包含了一個(gè)子div元素child，然后我們使子元素的div向左浮動(dòng)，頁(yè)面展示效果如下：

結(jié)果來(lái)看，父元素只顯示了四個(gè)方向邊框的高度，背景顏色未顯示，這是因?yàn)樽釉馗?dòng)脫離文檔流造成父元素高度塌陷。

3.解決方法

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

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

頁(yè)面展示效果如下：

父元素高度被撐起來(lái)了，背景顏色也顯示出來(lái)了。

4.BFC概念

我們先了解一個(gè)名詞：BFC（block formatting context），中文為“塊級(jí)格式化上下文”。

先記住一個(gè)原則：如果一個(gè)元素具有BFC,那么內(nèi)部元素再怎么翻江倒海，翻云覆雨，都不會(huì)影響外面的元素。所以，BFC元素是不可能發(fā)生margin重疊的，因?yàn)閙argin重疊會(huì)影響外面的元素的；BFC元素也可以用來(lái)清楚浮動(dòng)帶來(lái)的影響，因?yàn)槿绻磺宄?，子元素浮?dòng)則會(huì)造成父元素高度塌陷，必然會(huì)影響后面元素的布局和定位，這顯然有違BFC元素的子元素不會(huì)影響外部元素的設(shè)定。

以下情況會(huì)觸發(fā)BFC:

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

顯然我們?cè)谠O(shè)置overflow值為hidden時(shí)使container元素具有BFC，那么子元素child浮動(dòng)便不會(huì)帶來(lái)父元素的高度坍塌影響。

5.總結(jié)

　　設(shè)置overflow為hidden使元素具有BFC而不會(huì)受子元素的影響，但是當(dāng)子元素過(guò)多需要滾動(dòng)顯示時(shí)，我們可以設(shè)置overflow的值為auto或acroll，超出父元素之外的元素會(huì)被隱藏。使用overflo:hidden也具有一定的局限性，所以我們應(yīng)該根據(jù)具體的業(yè)務(wù)場(chǎng)景來(lái)選擇合適的方法。

?參考資料：

  • 《CSS世界》-張?chǎng)涡?/li>
  • overflow:hidden清除浮動(dòng)原理解析及清除浮動(dòng)常用方法總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1499.html

相關(guān)文章

  • 【前端Talkking】CSS系列——CSS深入理解之float浮動(dòng)

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

    yankeys 評(píng)論0 收藏0

  • css浮動(dòng)現(xiàn)象及清除浮動(dòng)的方法

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

    Kyxy 評(píng)論0 收藏0

  • css浮動(dòng)現(xiàn)象及清除浮動(dòng)的方法

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

    weakish 評(píng)論0 收藏0

  • CSS學(xué)習(xí)摘要-浮動(dòng)與清除浮動(dòng)

    摘要：為了實(shí)現(xiàn)這個(gè)效果，我們需要清除浮動(dòng)。元素被向下移動(dòng)用于清除之前的左右浮動(dòng)。塊格式化上下文對(duì)浮動(dòng)定位與清除浮動(dòng)都很重要。浮動(dòng)定位和清除浮動(dòng)時(shí)只會(huì)應(yīng)用于同一個(gè)內(nèi)的元素。且為了不影響接下來(lái)的文檔標(biāo)準(zhǔn)流，往往也要收尾做出清除浮動(dòng)。以下從浮動(dòng)到BFC的段落 摘自MDN 網(wǎng)絡(luò)開發(fā)者float 浮動(dòng)float CSS屬性指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。該元素從網(wǎng)頁(yè)的正常流...

    番茄西紅柿 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<