bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

CSSBFC是什么及有什么作用

這篇文章主要講解了“CSS BFC是什么及有什么作用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS BFC是什么及有什么作用”吧！

十載的烏審網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整烏審建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“烏審網(wǎng)站設(shè)計”,“烏審網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

在了解BFC(Block Formatting Context)之前，我們先來看看FC(Formatting Context)是什么：

CSS BFC是什么及有什么作用

這段話來自W3C官網(wǎng)，我們可以得到如下信息：

  • 所有的盒子都屬于一個FC

  • 塊級元素的布局屬于一個BFC。例如div/p/h2等 -> BFC布局中

  • 行內(nèi)級元素的布局屬于一個IFC。例如img/a/span/i -> IFC布局中

簡單理解：塊級元素所在的布局和上下文就是BFC，行內(nèi)級元素所在的布局和上下文就是IFC

問題1.塊級元素都是在BFC中布局的，那么這個BFC在哪里呢

首先我們先看一下W3C的官方解釋：

CSS BFC是什么及有什么作用

MDN上整理出的下了情況會創(chuàng)建BFC：

  • 根元素(html)

  • 浮動元素(元素的float值不是none)

  • 絕對定位元素(元素的position為absolute或者fixed)

  • 行內(nèi)塊元素(元素的display為inline-block)

  • 表格單元格(元素的display為table-cell，HTML表格單元格默認(rèn)為該值，表格標(biāo)題(元素的display為table-caption，HTML表格標(biāo)題默認(rèn)為該值)row，tbody，thead，tfoot的默認(rèn)屬性)或inline-table)

  • overflow計算值(Computed)不為visible的塊元素

  • 彈性元素(display為flex或inline-flex元素的直接子元素)

  • 網(wǎng)格元素(display為grid或inline-grid元素的直接子元素)

  • display值為flow-root的元素

由此可見

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

這段代碼中的box1和box2都是在html根元素的BFC中布局的

問題2.BFC的作用

首先先看一下官方文檔對BFC作用的描述:

CSS BFC是什么及有什么作用

我們可以得到的信息：

  • 在一個BFC中，盒子會從包含塊的頂部開始，在垂直方向上會一個挨著一個擺放，可能很多人都對這一點習(xí)以為常，但這點是BFC幫助我們實現(xiàn)的。當(dāng)我們對某個盒子設(shè)置一個margin-top的時候，BFC會幫助我們解析，然后會在盒子布局時候給一個上邊距

  • 在一個BFC中，每個元素的左邊緣都會緊貼著包含塊的左邊緣

  • 在同一個BFC中，在垂直方向上，相鄰兩個盒子的margin會重疊，值取兩者中較大的(可以利用此特性解決margin重疊問題)

作用1：利用BFC解決margin重疊問題
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        height: 200px;
        width: 400px;
        background-color: orange;

        margin-bottom: 30px;
      }
      .box2 {
        height: 150px;
        background-color: purple;

        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

此時box1和box1此時同處于html的BFC中，并且box1和box2在垂直方向上相鄰，所以會出現(xiàn)margin重疊，取兩者其中較大的值50px

CSS BFC是什么及有什么作用

如何解決呢？可能很多人會想到直接給box1添加一個BFC，所以直接給box1添加個overflow:hidden屬性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        height: 200px;
        width: 400px;
        background-color: orange;

        margin-bottom: 30px;

        overflow: hidden;
      }
      .box2 {
        height: 150px;
        background-color: purple;

        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

結(jié)果呢？

CSS BFC是什么及有什么作用

發(fā)現(xiàn)并不起作用。可能此時很多人就懵了，box1此時不是明明已經(jīng)形成了BFC了嘛，為什么還會發(fā)生重疊？讓我來給你解釋一下，首先此時box1確實是已經(jīng)形成了BFC（可以理解成box1內(nèi)部形成了BFC），但是對于box1這個元素的本身，還是和box2同屬于html的BFC中，所以還是會發(fā)生margin重疊

所以我們要給box1套一層，然后給box1外層的盒子設(shè)置BFC

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 給box1外層增加一個container盒子，并設(shè)置BFC */
      .container {
        overflow: hidden;
      }
      .box1 {
        height: 200px;
        width: 400px;
        background-color: orange;

        margin-bottom: 30px;
      }
      .box2 {
        height: 150px;
        background-color: purple;

        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div>
      <div></div>
    </div>
    <div></div>
  </body>
</html>

此時box1屬于container的BFC，而box2屬于html的BFC，不屬于同一個BFC，所以就能解決margin重疊問題

CSS BFC是什么及有什么作用

作用2：解決浮動高度塌陷問題

當(dāng)我們給container里面的四個item設(shè)置浮動的時候，很明顯，這幾個元素都會脫離文檔流，此時container不會有高度

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        background-color: orange;
      }

      .item {
        width: 400px;
        height: 200px;
        box-sizing: border-box;
        border: 1px solid #000;
        float: left;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

CSS BFC是什么及有什么作用

很多網(wǎng)上博主說，通過給container設(shè)置一個BFC，內(nèi)部的浮動元素就會向其匯報高度，然后container就能解決浮動高度塌陷問題，這個做法是正確的，但是這個說法其實是錯誤，并不是因為其內(nèi)部的浮動元素向其匯報了高度

事實上，想通過BFC解決高度塌陷問題需要滿足兩個條件：

  • 浮動元素的父元素觸發(fā)BFC，形成獨立的塊級格式化上下文(BFC)

  • 浮動元素的父元素高度為auto

首先我們先看一段W3C的描述

CSS BFC是什么及有什么作用

大致意思為BFC的高度是auto情況下，高度是這樣計算：

  • 如果只有inline-level，是行高的頂部和底部的距離

  • 如果有block-level，是有最底層的塊上邊緣和最底層塊盒子的下邊緣之間的距離（有margin也會計算在內(nèi)）

  • 如果有絕對定位元素，將被忽略（所有我們無法通過BFC解決絕對定位的高度塌陷問題）

  • 如果有浮動元素，那么會增加高度以包括這些浮動元素的下邊緣（這才是BFC能解決浮動元素塌陷問題的原因，并不是因為浮動元素向上匯報了高度）

所以我們直接給container通過添加overflow屬性設(shè)置BFC，則由于上述第四條4特性，container會增加高度來包括內(nèi)部四個item浮動元素下邊緣，所以解決了浮動塌陷問題

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        background-color: orange;
        /* 通過overflow形成BFC */
        overflow: hidden;
      }

      .item {
        width: 400px;
        height: 200px;
        box-sizing: border-box;
        border: 1px solid #000;
        float: left;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

CSS BFC是什么及有什么作用

感謝各位的閱讀，以上就是“CSS BFC是什么及有什么作用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS BFC是什么及有什么作用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

本文題目：CSSBFC是什么及有什么作用
網(wǎng)站地址：http://vcdvsql.cn/article16/jhejdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站、微信公眾號、網(wǎng)站維護、域名注冊、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運營