使用css怎么清除浮動(dòng)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)使用css怎么清除浮動(dòng)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、新安網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為新安等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

本文的框架圖如下：

使用css怎么清除浮動(dòng)

一、浮動(dòng)到底是什么？

W3school中給出的浮動(dòng)定義為浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｓ捎诟?dòng)框脫離文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

使用css怎么清除浮動(dòng)

在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素，在這種情況下，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象。這個(gè)現(xiàn)象叫浮動(dòng)溢出，為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫CSS清除浮動(dòng)。
 

二、浮動(dòng)有什么特點(diǎn)？

浮動(dòng)的特點(diǎn)，可以用八個(gè)字總結(jié)：脫標(biāo)、貼邊、字圍和收縮。

為了更好說(shuō)明，請(qǐng)看下圖：
當(dāng)框 1 向左浮動(dòng)時(shí)，它脫離文檔流（脫標(biāo)）并且向左移動(dòng)（貼邊），直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失。如果框2中有文字，就會(huì)圍著框1排開（字圍）。

如果把所有三個(gè)框都向左浮動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。

使用css怎么清除浮動(dòng)

下面著重講解下第四個(gè)特點(diǎn)--收縮

一個(gè)浮動(dòng)的內(nèi)聯(lián)元素（比如span img標(biāo)簽）不需要設(shè)置display：block就可以設(shè)置寬度。

<style>
        div{
            float: left;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<div>
    這是一段文字
</div>
</body>

得到以下的效果：

使用css怎么清除浮動(dòng)

我們都知道div標(biāo)簽是塊級(jí)元素，會(huì)獨(dú)占一行，然而上面的例子中將div設(shè)置為左浮后，其寬度不再是占滿一行，而是收緊為內(nèi)部元素的寬度，這就是浮動(dòng)第四個(gè)特征的含義。

三、浮動(dòng)有什么缺點(diǎn)？

先看下面這段代碼：

 <style>
      .parent{
          border: solid 5px;
          width:300px;
      }
      .child:nth-child(1){
          height: 100px;
          width: 100px;
          background-color: yellow;
          float: left;
      }
      .child:nth-child(2){
          height: 100px;
          width: 100px;
          background-color: red;
          float: left;
      }
      .child:nth-child(3){
          height: 100px;
          width: 100px;
          background-color: greenyellow;
          float: left;
      }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
</body>

我們想讓父容器包裹著三個(gè)浮動(dòng)元素，然而事與愿違，得到卻是這樣的結(jié)果：

使用css怎么清除浮動(dòng)

這就是浮動(dòng)帶來(lái)副作用----父容器高度塌陷，于是清理浮動(dòng)就顯著至關(guān)重要。

四、如何清理浮動(dòng)？

清除浮動(dòng)不是不用浮動(dòng)，清除浮動(dòng)產(chǎn)生的父容器高度塌陷。

套路1：給浮動(dòng)元素的父元素添加高度（擴(kuò)展性不好）

如果一個(gè)元素要浮動(dòng)，那么它的父元素一定要有高度。高度的盒子，才能關(guān)住浮動(dòng)?？梢酝ㄟ^(guò)直接給父元素設(shè)置height，實(shí)際應(yīng)用中我們不大可能給所有的盒子加高度，不僅麻煩，并且不能適應(yīng)頁(yè)面的快速變化；另外一種，父容器的高度可以通過(guò)內(nèi)容撐開（比如img圖片），實(shí)際當(dāng)中此方法用的比較多。

套路2：clear:both;

在最后一個(gè)子元素新添加最后一個(gè)冗余元素，然后將其設(shè)置clear:both,這樣就可以清除浮動(dòng)。這里強(qiáng)調(diào)一點(diǎn)，即在父級(jí)元素末尾添加的元素必須是一個(gè)塊級(jí)元素，否則無(wú)法撐起父級(jí)元素高度。

<div id="wrap">
        <div id="inner"></div>
        <div style="clear: both;"></div>
    </div>
  #wrap{
          border: 1px solid;
    }
    #inner{
          float: left;
          width: 200px;
          height: 200px;
          background: pink;
    }

套路3：偽元素清除浮動(dòng)

上面那種辦法固然可以清除浮動(dòng)，但是我們不想在頁(yè)面中添加這些沒(méi)有意義的冗余元素，此時(shí)如何清除浮動(dòng)嗎？
結(jié)合 :after 偽元素和 IEhack ，可以完美兼容當(dāng)前主流的各大瀏覽器，這里的 IEhack 指的是觸發(fā) hasLayout。

<div id="wrap" class="clearfix">
    <div id="inner"></div>
</div>
   #wrap {
        border: 1px solid;
      }
      #inner {
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
      }
      /*開啟haslayout*/
      .clearfix {
        *zoom: 1;
      }
      /*ie6 7 不支持偽元素*/
      .clearfix:after {
        content: '';
        display: block;
        clear: both;
        height:0;
        line-height:0;
        visibility:hidden;//允許瀏覽器渲染它，但是不顯示出來(lái)
      }

給浮動(dòng)元素的父容器添加一個(gè)clearfix的class，然后給這個(gè)class添加一個(gè):after偽元素，實(shí)現(xiàn)元素末尾添加一個(gè)看不見(jiàn)的塊元素來(lái)清理浮動(dòng)。這是通用的清理浮動(dòng)方案，推薦使用

套路4：給父元素使用overflow:hidden;

這種方案讓父容器形成了BFC（塊級(jí)格式上下文），而BFC可以包含浮動(dòng)，通常用來(lái)解決浮動(dòng)父元素高度坍塌的問(wèn)題。

BFC的觸發(fā)方式

我們可以給父元素添加以下屬性來(lái)觸發(fā)BFC：

  • float 為 left | right

  • overflow 為 hidden | auto | scorll

  • display 為 table-cell | table-caption | inline-block

  • position 為 absolute | fixed

這里可以給父元素設(shè)置overflow:auto，但是為了兼容IE最好使用overflow:hidden。

但這種辦法有個(gè)缺陷：如果有內(nèi)容出了盒子，用這種方法就會(huì)把多的部分裁切掉，所以這時(shí)候不能使用。

BFC的主要特征:

  • BFC容器是一個(gè)隔離的容器，和其他元素互不干擾；所以我們可以用觸發(fā)兩個(gè)元素的BFC來(lái)解決垂直邊距折疊問(wèn)題。

  • BFC不會(huì)重疊浮動(dòng)元素

  • BFC可以包含浮動(dòng),這可以清除浮動(dòng)。套路5：br標(biāo)簽清浮動(dòng)

br標(biāo)簽存在一個(gè)屬性：clear。這個(gè)屬性就是能夠清除浮動(dòng)的利器，在br標(biāo)簽中設(shè)置屬性clear，并賦值all。即能清除掉浮動(dòng)。

<div id="wrap">
      <div id="inner"></div>
      <br clear="all" />
    </div>
   #wrap {
        border: 1px solid;
      }
      #inner {
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
      }

上述就是小編為大家分享的使用css怎么清除浮動(dòng)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：使用css怎么清除浮動(dòng)
標(biāo)題來(lái)源：http://bm7419.com/article14/pcgede.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、定制網(wǎng)站、搜索引擎優(yōu)化、App開發(fā)、企業(yè)建站、網(wǎng)站制作

廣告

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

成都定制網(wǎng)站建設(shè)