CSS(7)--- 通俗講解清除浮動

時間 2019-11-18

標籤 css 通俗講解清除浮動欄目 CSS 简体版

原文原文鏈接

CSS(7)--- 通俗講解清除浮動

上一篇講了CSS浮動博客地址：CSS(6)---通俗講解浮動(float)css

1、理解清除浮動

一、爲何要清除浮動

咱們前面說過，浮動本質是用來作一些文字混排效果的，可是被咱們拿來作佈局用，則會有不少的問題出現。html

因爲浮動元素再也不佔用原文檔流的位置，因此它會對後面的元素排版產生影響，爲了解決這些問題，此時就須要在該元素中清除浮動。瀏覽器

準確地說，並非清除浮動，而是清除浮動後形成的影響佈局

二、清除浮動本質

清除浮動的本質: 主要爲了解決父級元素由於子級浮動引發內部高度爲0 的問題。firefox

咱們來詳細解釋下這句話code

再解釋下就是在標準流下面一個父div沒有設置高度屬性,那麼它的高度就會被子元素的高度撐開。可是若是這個父div中的子元素是浮動的話，若是父div下面再有htm

一個兄弟div，那麼這個兄弟div就會遮擋這個父元素。這個現象也叫浮動溢出。blog

示例文檔

<!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>
    <div class="father"> 父div
        <div class="big">子div</div>
        <div class="small">子div</div>
    </div>
    <div class="footer">兄弟div</div>
</body>
</html>

運行結果get

很明顯這裏，div1和div2已經上浮，而兄弟div就往上移動。這裏由於父div有文字因此佔了點高度，否則兄弟div會徹底覆蓋父div。

固然咱們能夠經過設置父div的高度，來使它不被兄弟div所覆蓋。好比這裏設置 height: 200px;

在刷新下頁面

當父div設置高度後，被覆蓋的問題倒是解決了，但在不少時候咱們是不會去設置父div的高度，由於不少時候咱們都不知道父div的高度要設置多少。

因此這個時候須要思考解決這個問題。

2、清除浮動的方法

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

在CSS中，clear屬性用於清除浮動。

基本語法格式

選擇器 {clear:屬性值;}

屬性值

一、額外標籤法

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

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

咱們在上面的代碼添加

<body>
    <div class="father"> 父div
        <div class="big">子div</div>
        <div class="small">子div</div>
        <div style="clear:both"></div>  <!--  只需在父盒子裏最後面添加這個空標籤添加clear:both屬性就能夠清除浮動 -->
    </div>
    <div class="footer">兄弟div</div>
</body>

運行結果

完美解決了。

優勢 通俗易懂，書寫方便。

缺點 添加無心義的標籤，結構化較差。

二、父級添加overflow屬性方法

能夠經過觸發BFC的方式，能夠實現清除浮動效果。（BFC後面會講）

能夠給父級元素添加： overflow爲 hidden|auto|scroll  均可以實現。

咱們將上面代碼修改成

<body>
    <div class="father" style="overflow: hidden;"> 父div  <!-- 父元素添加 overflow: hidden --> 
        <div class="big">子div</div>
        <div class="small">子div</div>
    </div>
    <div class="footer">兄弟div</div>
</body>

也是能實現去除浮動的效果。

優勢 代碼簡潔

缺點 內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素。

三、使用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>
    <div class="father clearfix">
        <div class="big"></div>
        <div class="small"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

優勢 符合閉合浮動思想結構語義化正確

缺點 因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

注意： content:"." 裏面儘可能跟一個小點，或者其餘，儘可能不要爲空，不然再firefox 7.0前的版本會有生成空格。

四、使用before和after雙僞元素清除浮動

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

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

    .clearfix {
        *zoom: 1;
    }

優勢 代碼更簡潔

缺點 因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

五、總結

一、在網頁主要佈局時使用:after僞元素方法並做爲主要清理浮動方式.文檔結構更加清晰；
二、在小模塊如ul裏推薦使用overflow:hidden;（同時留意可能產生的隱藏溢出元素問題）；

你若是願意有所做爲，就必須善始善終。(9)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。