首頁 > web前端 > css教學 > 為什麼要清除浮動?怎樣清除? (float)

為什麼要清除浮動?怎樣清除? (float)

angryTom
發布: 2019-11-28 14:29:37
轉載
7814 人瀏覽過

為什麼要清除浮動?怎樣清除? (float)

一、理解清除浮動

1、為什麼要清除浮動

我們前面說過,浮動本質是用來做一些文字混排效果的,但是被我們拿來做佈局用,則會有很多的問題出現。

由於浮動元素不再佔用原始文件流的位置,所以它會對後面的元素排版產生影響,為了解決這些問題,此時就需要在該元素中清除浮動。

推薦學習:CSS影片教學

#確切地說,不是清除浮動,而是清除浮動後造成的影響

2、清除浮動本質

清除浮動的本質: 主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。

我們來詳細解釋下這句話

為什麼要清除浮動?怎樣清除? (float)

再解釋下就是在標準流下面一個父p沒有設定高度屬性,那麼它的高度就會被子元素的高度撐開。但是如果這個父p中的子元素是浮動的話,如果父p下面再有

一個兄弟p,那麼這個兄弟p就會遮擋這個父元素。這個現像也叫浮動溢出。

範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        height: 200px;
        border: 1px solid red;
        width: 300px

    }
    .big {
        width: 100px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 80px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <p class="father"> 父p
        <p class="big">子p</p>
        <p class="small">子p</p>
    </p>
    <p class="footer">兄弟p</p>
</body>
</html>
登入後複製

運行結果

為什麼要清除浮動?怎樣清除? (float)

#很明顯這裡,p1和p2已經上浮,而兄弟p往上移動。這裡因為父p有文字所以佔了點高度,不然兄弟p會完全覆蓋父p。

當然我們可以透過設定父p的高度,來讓它不被兄弟p所覆蓋。例如這裡設定height: 200px;

在刷新下頁面

為什麼要清除浮動?怎樣清除? (float)

#當父p設定高度後,被覆蓋的問題卻是解決了,但在很多時候我們是不會去設定父p的高度,因為很多時候我們都不知道父p的高度要設定多少。

所以這個時候需要思考解決這個問題。

二、清除浮動的方法

清除浮動的方法本質: 就是把父盒子裡浮動的盒子圈到裡面,讓父盒子閉合出口和入口不讓他們出來影響其他元素。

在CSS中,clear屬性用來清除浮動。

基本語法格式

选择器 {clear:属性值;}
登入後複製

屬性值

為什麼要清除浮動?怎樣清除? (float)

#1、額外標籤法

透過在浮動元素末尾添加一個空的標籤,例如

 <p style="clear:both"></p>
登入後複製

我們在上面的程式碼添加


    

 父p         

子p

        

子p

        <p style="clear:both"></p>       

    
登入後複製

運行結果

為什麼要清除浮動?怎樣清除? (float)

##完美解決了。

優點 簡單易懂,書寫方便。

缺點 加入無意義的標籤,結構化較差。

2、父級新增overflow屬性方法

可以透過觸發BFC的方式,可以實現清除浮動效果。 (BFC後面會講)

可以给父级元素添加: overflow为 hidden|auto|scroll  都可以实现。
登入後複製
我們將上面程式碼修改為

<body>
    <p class="father" style="overflow: hidden;"> 父p  <!-- 父元素添加 overflow: hidden --> 
        <p class="big">子p</p>
        <p class="small">子p</p>
    </p>
    <p class="footer">兄弟p</p>
</body>
登入後複製
也是能實現移除浮動的效果。

優點 程式碼簡潔

缺點 內容增多時候容易造成不會自動換行導致內容被隱藏掉,無法顯示需要溢出的元素。

3、使用after偽元素清除浮動

:after 方式为空元素的升级版,好处是不用单独加标签了**
登入後複製
範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用after伪元素清除浮动</title>
    <style>
    .clearfix:after {  /*正常浏览器 清除浮动*/
        content:"";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        *zoom: 1;  /*zoom 1 就是ie6 清除浮动方式  *  ie7一下的版本所识别*/
    }
    .father {
        border: 1px solid red;
        width: 300px;

    }
    .big {
        width: 100px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 80px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <p class="father clearfix">
        <p class="big"></p>
        <p class="small"></p>
    </p>
    <p class="footer"></p>
</body>
</html>
登入後複製
優點符合閉合浮動思想結構語意化正確

#缺點由於IE6-7不支援:after,使用zoom:1觸發hasLayout。

注意: content:"." 裡面盡量跟著一個小點,或其他,盡量不要為空,否則再firefox 7.0前的版本會有生成空格。

4、使用before和after雙偽元素清除浮動

#使用方法將上面的clearfix樣式替換成如下

    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }
登入後複製
優點程式碼更簡潔

缺點由於IE6-7不支援:after,使用zoom:1觸發hasLayout。

5、總結

1、在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式.文档结构更加清晰;
2、在小模块如ul里推荐使用overflow:hidden;(同时留意可能产生的隐藏溢出元素问题);
登入後複製
本文來自PHP中文網,

CSS教學專欄,歡迎學習  

以上是為什麼要清除浮動?怎樣清除? (float)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板