CSS浮動與浮動清除(BFC)簡單教程

來源:互聯網
上載者:User

浮動

1. 什麼是浮動

當元素的 float 屬性不為 none 時就產生了浮動。

<p class="float">float</p>
.float {  float: left;  width: 100px;  height: 100px;  background-color: #ddd;}

2. 浮動的影響

  1. 浮動會使元素脫離文檔流,具體表現為:

    • 父元素高度塌陷,即不會包含浮動元素。
      比如上面的代碼就會表現為


      父元素高度塌陷

    • 文本環繞。


      文本環繞效果


      可以注意到這裡.normal元素的寬度覆蓋了.float元素,但是.float元素下是沒有文本的,也就是說文本被“擠”出來了,這是因為它雖然會脫離文檔流,但是不會脫離文字資料流。這個效果也是float屬性的本意。其代碼如下:

      <body>  <p class="float">float</p>  <p class="normal">正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素</p></body>
      body {  background-color: #ccc;}.float {  float: left;  width: 100px;  height: 100px;  background-color: #ddd;}.normal {  background-color: #fff;}
  2. 浮動元素的外邊距不會合并。
    關於外邊距合并的相關內容可以戳這裡。

  3. 元素一旦浮動便會變成行內塊元素,即 display: inline-block

3. 浮動的應用

  • 上面提到的文本環繞。

  • 寫一個三列布局,左右固定寬度,中間自適應。

    <body>  <p class="left float">left</p>  <p class="right float">right</p>  <p class="mid">自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素</p></body>
    body {  background-color: #ccc;}.float {  float: left;  width: 100px;  height: 100px;  background-color: #ddd;}.left {  float: left;}.right {  float: right;}.mid {  height: 100px;  background-color: #fff;  margin: 200px; /*故意加上了上下 margin 值*/}

    這裡我故意加上了上了 margin 值,可以看到效果:


    三列布局

    body 也隨 .midmargin 往下掉了,這點可以用前面介紹的外邊距合并來解釋。

    ps:我第一次自己寫這個三列布局的時候,html 是這樣寫的

    <body>  <p class="left float">left</p>  <p class="mid">自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素自適應寬度元素</p>  <p class="right float">right</p></body>

    如上把中間自適應的元素寫在中間,其實這樣比較符合邏輯,但是如果這樣寫是行不通的,右邊的元素會掉下來,因為 .mid 元素是區塊層級元素,會佔滿整行,.left 不會掉下來是因為它本來就是脫離文文檔流的浮動元素。

清除浮動

在子項目上清除

這裡我唯寫不會產生無意義標籤的方法。

  • 浮動元素後面若有兄弟元素,則可以在給它的兄弟元素加上clear屬性。
    如文本環繞那一部分代碼,給 .normal 加上 clear:left 或者 clear:bothclear 的具體用法這裡不做過多贅述。

  • 給要清除浮動的元素加上偽類或者虛擬元素。

    .float::after {  content: '';  display: block;  visiability: hidden;  height: 0;  clear: both;}

    關於 ::after 的使用可以看 MDN 的文檔。

在父元素上清除,即BFC

BFC(Block Formatting Context),即塊級格式上下文,它的官方解釋是:

浮動、絕對位置元素(positionabsolutefixed)、行內塊元素 display:inline-block、表格儲存格 display:table-cell、表格標題 display:table-caption 以及 overflow 屬性值不為 visible 的元素(除了該值被傳播到視點 viewport 的情況)將建立一個新的塊級格式化上下文。

總結來說它要滿足下列條件之一:

  1. float 不為 none

  2. position 不為 staticrelative

  3. displaytable-celltable-captioninline-blockflexinline-flex

  4. overflow 不為 visible

只要給父元素加上以上任意一個屬性滿足條件,也就是給父元素加上 BFC 就能清除子項目的浮動。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.