如何清除浮動

amuqiao 發布于2019-08-02 11:59 / 1358人閱讀

摘要：本文概述本文的框架圖如下一浮動到底是什么中給出的浮動定義為浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。如果把所有三個框都向左浮動，那么框向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

本文概述

本文的框架圖如下：

一、浮動到底是什么？

W3school中給出的浮動定義為浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框脫離文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

二、浮動有什么特點？

浮動的特點，可以用八個字總結：脫標、貼邊、字圍和收縮。

為了更好說明，請看下圖：
當框 1 向左浮動時，它脫離文檔流（脫標）并且向左移動（貼邊），直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。如果框2中有文字，就會圍著框1排開（字圍）。

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

下面著重講解下第四個特點--收縮

一個浮動的內聯元素（比如span img標簽）不需要設置display：block就可以設置寬度。





    這是一段文字

得到以下的效果：

我們都知道div標簽是塊級元素，會獨占一行，然而上面的例子中將div設置為左浮后，其寬度不再是占滿一行，而是收緊為內部元素的寬度，這就是浮動第四個特征的含義。

三、浮動有什么缺點？

先看下面這段代碼：

我們想讓父容器包裹著三個浮動元素，然而事與愿違，得到卻是這樣的結果：

這就是浮動帶來副作用----父容器高度塌陷，于是清理浮動就顯著至關重要。

四、如何清理浮動？

清除浮動不是不用浮動，清除浮動產生的父容器高度塌陷。

套路1：給浮動元素的父元素添加高度（擴展性不好）

如果一個元素要浮動，那么它的父元素一定要有高度。高度的盒子，才能關住浮動。可以通過直接給父元素設置height，實際應用中我們不大可能給所有的盒子加高度，不僅麻煩，并且不能適應頁面的快速變化；另外一種，父容器的高度可以通過內容撐開（比如img圖片），實際當中此方法用的比較多。

套路2：clear:both;

在最后一個子元素新添加最后一個冗余元素，然后將其設置clear:both,這樣就可以清除浮動。這里強調一點，即在父級元素末尾添加的元素必須是一個塊級元素，否則無法撐起父級元素高度。

    #wrap{
          border: 1px solid;
    }
    #inner{
          float: left;
          width: 200px;
          height: 200px;
          background: pink;
    }

套路3：偽元素清除浮動

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

      #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;//允許瀏覽器渲染它，但是不顯示出來
      }

給浮動元素的父容器添加一個clearfix的class，然后給這個class添加一個:after偽元素，實現元素末尾添加一個看不見的塊元素來清理浮動。這是通用的清理浮動方案，推薦使用

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

這種方案讓父容器形成了BFC（塊級格式上下文），而BFC可以包含浮動，通常用來解決浮動父元素高度坍塌的問題。

BFC的觸發方式

我們可以給父元素添加以下屬性來觸發BFC：

float 為 left | right

overflow 為 hidden | auto | scorll

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

position 為 absolute | fixed

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

但這種辦法有個缺陷：如果有內容出了盒子，用這種方法就會把多的部分裁切掉，所以這時候不能使用。

BFC的主要特征:

BFC容器是一個隔離的容器，和其他元素互不干擾；所以我們可以用觸發兩個元素的BFC來解決垂直邊距折疊問題。

BFC不會重疊浮動元素

BFC可以包含浮動,這可以清除浮動。

套路5：br標簽清浮動

br標簽存在一個屬性：clear。這個屬性就是能夠清除浮動的利器，在br標簽中設置屬性clear，并賦值all。即能清除掉浮動。

      #wrap {
        border: 1px solid;
      }
      #inner {
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
      }

如果覺得文章對你有些許幫助，歡迎在我的GitHub博客點贊和關注，感激不盡！

參考文章 br清浮動的原理與clear:both的兼容 清浮動 | 如何清除浮動 CSS-清除浮動

GPU云服務器云服務器清除浮動如何清除cdn緩存如何清除html標簽如何清除緩存php

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

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

如何清除浮動

摘要：本文概述本文的框架圖如下一浮動到底是什么中給出的浮動定義為浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。如果把所有三個框都向左浮動，那么框向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。本文概述本文的框架圖如下： showImg(https://segmentfault.com/img/remote/1460000016978861?...

fjcgreat 2019-08-23 13:04 評論0 收藏0
如何清除浮動

摘要：本文概述本文的框架圖如下一浮動到底是什么中給出的浮動定義為浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。如果把所有三個框都向左浮動，那么框向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。本文概述本文的框架圖如下： showImg(https://segmentfault.com/img/remote/1460000016978861?...

wua_wua2012 2019-08-29 17:15 評論0 收藏0
為何要清除浮動？如何清除？

摘要：原因元素設置了屬性后，就會脫離文檔流，當包含框的高度小于浮動框的時候，會出現高度塌陷。因此才需要清除浮動表現如圖包括框已經包不住的圖片了清除浮動方法給包含框添加偽元素清除浮動。代碼使用，原理讓浮動塊包含在同一個中。原因：元素設置了float屬性后，就會脫離文檔流，當包含框的高度小于浮動框的時候，會出現高度塌陷。因此才需要清除浮動！表現如圖：包括框container已經包不住flo...

shixinzhang 2019-04-23 13:25 評論0 收藏0
css清除浮動的原理

摘要：最近學習發現了高度塌陷時候要清除浮動為了理解清楚浮動原理網上找了不少資料發現都寫的不是很清楚而且都是一模一樣的內容我在里分享一下我對清楚浮動原理的理解如果你已經很了解什么是浮動和浮動的效果你可以直接跳轉到三如何清除浮動重點閱讀一什么是浮動最近學習css發現了高度塌陷時候要清除浮動,為了理解清楚浮動原理,網上找了不少資料,發現都寫的不是很清楚,而且都是一模一樣的內容,我在里分享一下我對清楚浮動...

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