浮動讓我們既愛又恨

愛, 有了浮動我們可以更加方便的佈局.

恨, 有了浮動他也帶來了一些副作用, 特別是在IE67上(現在幾乎已經銷聲匿跡了).

為了避免前面元素的浮動給後面的元素帶不必要的影響, 我們就需要為後面的元素清除浮動.

清除浮動的方式有很多, 只要我們把浮動的原理搞明白了, 清除浮動也是非常好理解的.

正所謂萬變不離其宗

有如下程式碼, 利用各種方法來消除浮動對 div.content的影響

<style>
*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;/*去掉小圓點*/
}
.nav li{
    width
 
: 100px;
    height: 40px;
    float: left;
    border: 1px solid #000;
}
.content{
    width: 500px;
    height: 300px;
    background-color: pink;
}
</style>
<div class="header">
    <ul class="nav">
        <li>導航 1</li>
        <li>導航 2</li>
        <li>導航 3</li
 
>
    </ul>
</div>
<div class="content"></div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

說明:

• 因為<li>浮動, 所以<ul>沒有高度, 所以<div class="header">也沒有高度, 所以<div="content">就跑上去了.

一. 方式1: 給浮動元素的父輩容器新增高度

很多時候為了高度的自適應性, 我們用子元素去撐起父元素的高度

但是如果子元素浮動之後, 就無法自動撐起父元素

導致, 父元素的高度為 0, 後面的元素就會長驅直入, 進駐到浮動元素的下方.真是悲哉.

解決這個問題最簡單的辦法就是 手動給浮動元素的父輩元素新增高度.

好使是好使, 但是不夠靈活.

給<ul>新增高度

ul{ height: 40px; }

• 1

說明:

• 給<ul>新增高度之後, <div>也有了高度, 然後後面的那個<div>就上不去了.相當於清除了浮動帶來的影響

• 缺點: 需要手動新增高度, 如何後面<li>的高度發生變化之後,還行再次修改<ul>的高度, 給後期的維護帶來麻煩.

• 優點: 簡單粗暴直接有效

• 這種方式, 儘量少用, 高度最好依賴子元素來撐開, 避免手動新增.

二. 方式2: 使用清除屬性clear

clerar屬性是css專門提供用來清除浮動的.

這個屬性主要有三個值:

• left 清除前面的左浮動元素帶給我的影響

• right清除前面的右浮動元素帶給我的影響

• both 同時清除前面的左右浮動元素帶給我的影響. 一般情況下選擇這個值比較方便.

.content{clear : both};

• 1
• 2

說明:

• clear屬性的含義是避免前面的浮動元素對自己的影響. 所以, 誰不想讓別人影響自己, 就新增到誰身上.

• clear本質是, 瀏覽器在清理元素(使用clear屬性的元素)的頂部添加了足夠多的外邊距, 使清理元素的頂部邊緣垂直下降到浮動元素的下面.

該方法雖好, 但是也有一些不足之處.

2.1 不足1: 浮動元素的父輩仍然沒有高度

因為clear對那些浮動的元素沒有做任何的操作, 所以浮動元素的父輩仍然沒有高度(如果你沒有手動新增的話)

2.2 不足2: 此時清除元素的margin-top失效

前面說過clear的本質是在清理元素頂部新增足夠多的外邊距

所以這個時候我們再手動新增margin-top就失效了.

當然, 其他三個方向的margin還是有效的.

.content{ margin-top : 1000px; }

• 1

三. 方法3:外牆元素隔離法

方法2清除浮動的最大問題是div.content不能設定margin-top無效.

• 想一想, 我們給後面的元素設定margin-top的目的是為了讓後面的元素與前面的元素有一定的間距.

• 現在margin-top既然無效了, 那我們能不能用一個單獨的元素去填充我們本來想要的這段margin-top區域

於是就有了外牆隔離法.

<style>
*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;/*去掉小圓點*/
}
.nav li{
    width: 100px;
    height: 40px;
    float: left;
    border: 1px solid #000;
}
.content{
    width: 500px;
    height: 300px;
    background-color: pink;
}
.clear_b{
    clear: both;
}
</style>
<div class="header">
    <ul class="nav">
        <li>導航 1</li>
        <li>導航 2</li>
        <li>導航 3</li>
    </ul>
</div>
<div class="clear_b"></div>
<div class="content"></div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

說明:

• 完美隔開, 現在div.content完全和前面的浮動元素沒有任何的隔離了.

• 現在你可以給”牆”新增高度來增加他們的間距, 也可以給div.content新增margin-top. 一切皆有有你定.

• 缺點: 雖然此方法用起來爽, 也沒啥後遺症, 但是無端添加了一個本不該有的元素, y影響了我們的HTML結構.

於是就有了新的演變: 內牆元素隔離法.

四. 方法4: 內牆元素隔離法

把元素放在外面, 影響HTML結構.

於是有人乾脆把”隔離元素”放在內部.

<div class="header">
    <ul class="nav">
        <li>導航 1</li>
        <li>導航 2</li>
        <li>導航 3</li>
    </ul>
    <div class="clear_b"></div>
</div>
<div class="content"></div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

說明:

• 在第一個<div>內部新增一個清楚浮動的元素之後, 神奇的事情發生了, div.header竟然有自動有了高度.

• 原因就是高度為0的<div>元素被固定在浮動元素的下面, div.header想要包含住這個新的<div>則必須自己有高度才行, 然後他就自己有了高度

• 上帝說需要呼吸, 然後就有了空氣.

• 在相當長的一段時間內, 這裡的內牆元素隔離法是各大公司使用的手段.

直到有一天, 一個新的東西出現了….

五. 方法5: 內牆法的升級—使用偽元素

內牆法, 用著很爽.

但是對有潔癖的前端工程師來說, 也不是那麼的舒服: 要新增一個元素去專門的清除浮動, 不爽.

CSS3的偽元素(::)拯救了他們.

今天先了解一個偽元素::after.其他待後期課程詳細道來.

你只需要知道, 給一個元素新增一個::after則相當於給這個元素添加了子元素, 而且這個子元素會是他的最後一個兒子.

<style>
*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;/*去掉小圓點*/
}
.nav li{
    width: 100px;
    height: 40px;
    float: left;
    border: 1px solid #000;
}
.content{
    width: 500px;
    height: 300px;
    background-color: pink;
}

.clear_float::after{
    /*只需要給浮動元素的父容器新增上這個類就可以了: clear_float*/
    display: block;/*把::after設定成塊級元素*/
    content: "";/*想讓偽類起作用, 必須新增這個屬性*/
    clear: both;
}
</style>
<div class="header">
    <ul class="nav clear_float">
        <li>導航 1</li>
        <li>導航 2</li>
        <li>導航 3</li>
    </ul>
</div>
<div class="content"></div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35

說明:

• 利用偽元素完美無缺, perfect的解決了問題.

• 一些瀏覽器不相容偽元素(你知道我說的誰), 那你就把這個偽元素的兩個冒號, 變成一個就行了,成為偽類,效果一樣,相容性還好.

• 像當初病人吃了穆拉德的治療心血管病的藥物之後發現竟然有如此效果…., 然後就有了偉哥.

• 當程式不經意間給浮動元素的容器使用了一個叫…的屬性之後, 竟然發現…, 然後就有了第六種清除浮動的方法…

方法6: 使用over-flow清除浮動

前面我們學習過over-flow的使用, 他的作用是處理當子元素溢位的時候的情況的.

現在我們把它用到浮動元素的父容器, 然後你發現竟然….

ul{
    overflow: hidden;
}

• 1
• 2
• 3

說明:

• 神奇的事情發生了, <ul>竟然有了高度, 那麼自然就清除了浮動對其他元素的影響.

• why? 為什麼會這麼神奇? 我只能說這是瀏覽器的渲染機制引起, 是overflow的副作用.

• 使用這個屬性要小心, 在內容多的情況下有可能引起內容的截斷. 注意下就好.

總結:

清除浮動的核心理念就是想辦法讓浮動元素的父元素有高度, 事情就解決了.