CSS浮動提示

這次給大家帶來CSS浮動提示，CSS浮動使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

浮動具有以下特性：

1. 蓋不住的文本

2. 浮動元素後面不是區塊層級元素，後面的元素將會和它並排（除非設定了元素的寬度，並且螢幕放不下時將會換行）

3. 浮動元素的上一個元素如果沒有浮動，浮動只在當前行浮動；當浮動遇到浮動，它們將在一行排序，除非沒有位置了

4. 當元素設定定位值為absolute、fixed時，浮動將被忽略

5. float引起父元素高度塌陷

6. 浮動元素會被後一個元素的margin-top影響

蓋不住的文本

<style>        body,p{            margin:0;            padding:0;        }       p{           width:100px;           height:100px;       }        .item1{            float:left;            background-color: pink;        }        .item2{            background-color: #58d3e2;        }    </style><p class="item1">item1</p><p class="item2">item2</p>

可以看到，item2的p除了文本，其他的內容都看不見了，因為它跑到item1下面了。為什麼文字不會被浮動的元素蓋住呢？因為浮動的本質就是用來實現文字環繞的。

從上面也可以得出：浮動元素後面的區塊層級元素會佔據浮動元素的位置，並且浮動元素總是在標準流元素上面。

浮動元素後面不是區塊層級元素，後面的元素將會和它並排（除非設定了元素的寬度，並且螢幕放不下時將不會換行）

<style>        body,p{            margin:0;            padding:0;        }       p{           width:100px;           height:100px;       }        .item1{            float:left;            background-color: pink;        }        .item2{            display: inline-block;            background-color: #58d3e2;        }    </style><p class="item1">item1</p><p class="item2">item2</p>

浮動元素的上一個元素如果沒有浮動，浮動只在當前行浮動；當浮動遇到浮動，它們將在一行排序，除非沒有位置了

<style>        body,p{            margin:0;            padding:0;        }       p{           width:100px;           height:100px;       }        .item1{            background-color: pink;        }        .item2{            float:left;            background-color: #58d3e2;        }    </style><p class="item1">item1</p><p class="item2">item2</p><p class="item3">item3</p>

 <style>        body,p{            margin:0;            padding:0;        }       p{           width:400px;           height:100px;           float: left;       }        .item1{            background-color: pink;        }        .item2{            background-color: #58d3e2;        }        .item3{            background-color: #61dafb;        }        .item4{            background-color: #e9203d;        }    </style><p class="item1">item1</p><p class="item2">item2</p><p class="item3">item3</p><p class="item4">item4</p>

可以設定width為百分比來實現自適應

 p{           width:25%;           height:100px;           float: left;       }

當元素設定定位值為absolute、fixed時，浮動將被忽略

<style>        body,p{            margin:0;            padding:0;        }       p{           position: absolute;           float: left;           width:100px;           height:100px;           border: 1px solid red;       }    </style> <p class="item1">浮動遇上定位</p>

行內元素使用浮動以後產生一個塊框，因此它就可以使用width，height，margin，padding等屬性了

 <style>        body,p{            margin:0;            padding:0;        }       [class^='item']{           float: left;           width:100px;           height:100px;           line-height: 100px;           text-align: center;       }        .item1{            float: left;            background-color: pink;        }        .item2{            display: inline-block;            background-color: #58d3e2;        }    </style><span class="item1">item1</span><p class="item2">item2</p>

float引起父元素高度塌陷

在網頁設計中，很常見的一種情況是給內容一個p作為包裹容器，而這個包裹容器不設定高度，而是讓裡面的內容撐開包裹容器的高度。如果不給子項目設定浮動的話，並不會出現什麼問題，而一旦給子項目設定了浮動，父元素會無法自適應浮動元素的高度，會出現父元素高度為0，從而背景色什麼的都不能展示了。原因是：

因為沒有預先設定p高度，所以p高度由其包含的子項目高度決定。而浮動脫離文檔流，所以子項目並不會被計算高度。此時的p中，相當於p中子項目高度為0，所以發生了父元素高度塌陷現象。

   <style>        body,p{            margin:0;            padding:0;        }        .item{            float: left;            width:100px;            height:100px;            background-color: pink;        }    </style>   <p class="box">       <p class="item"></p>   </p>

解決辦法，

1.給父元素增加“overflow:hidden"

當然也可以是"overflow：auto"。但為了相容IE最好用overflow:hidden。

.box{  overflow:hidden;}

那麼為什麼“overflow:hidden"會解決這個問題呢？

是因為“overflow:hidden”會觸發BFC，BFC反過來決定了"height:auto"是如何計算的

，即計算BFC的高度時，浮動元素也參與計算，因此此時父元素會自適應浮動元素的高度。

所以呢，也可以設定"display:inline-block"、"position:absolute"、"float:left"來解決父元素高度坍塌的問題。因為凡是能建立一個BFC，就能達到包裹浮動子項目的效果。因此網上都說成“BFC能包裹浮動元素”.

2.在父元素內容的後面或者前面增加虛擬元素+清除浮動

可以給父元素的內容添加一個虛擬元素，可以用::before或者::after，然後內容為空白，這樣就不會佔據位置，最後為虛擬元素加上“clear:both"來清除浮動。

 <style>        body,p{            margin:0;            padding:0;        }        .box::after{            content: '';            display: block;            clear:both;        }        .item{            float:left;            width:100px;            height: 100px;            background-color: deeppink;        }    </style><p class="box">    <p class="item"></p></p>

為什麼這樣可以呢？

弄清原因需要知道兩點：一是虛擬元素的實際作用，二是css的清除浮動（clear)只能影響使用清除的元素本身，不能影響其他元素,並且清除浮動可以理解為打破橫向排列。

首先需要搞清除::after和::before起的作用，它們不是在一個元素的後面或者前面插入一個虛擬元素，而是會在元素內容後面或者前面插入一個虛擬元素(是在元素裡面)，之前我一直以為:before和:after虛擬元素 插入的內容會被注入到目標元素的前或後注入，其實注入的內容將是有關聯的目標元素的子項目，但它會被置於這個元素的任何內容的“前”或“後”。我們來舉個例子，可以看到.box的高度為300px,說明兩個虛擬元素已經插入到.box內容裡了。

<style>        body,p{            margin:0;            padding:0;        }        .box::before{            content: 'before';            height: 100px;            width: 100px;            display: block;            clear:both;            background-color: #61dafb;        }        .box::after{            content: 'after';            width:100px;            height:100px;            display: block;            clear:both;            background-color: aquamarine;        }        .item{            float:left;            width:100px;            height: 100px;            background-color: deeppink;        }    </style><p class="box">    <p class="item"></p></p>

綜上，所以我們常用下列方式來清除浮動

.box::after{  content:'';  display:block;  clear:both;}或者.box::before{  content:'';  display:block;  clear:both;}或者.box::before,.box::after{  content:'';  display:block;  clear:both;}//::before和::after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。預設情況下，偽類元素的display是預設值inline，可以通過設定display:block來改變其顯示。

在父元素的內容前後插入一個虛擬元素，content為空白可以保證不佔據位置（高度為0）。"clear:both"可以清除父元素左右的浮動，導致.box::before和.box::after遇到浮動元素會換行，從而會撐開高度，父元素會自適應這個高度從而不會出現高度坍陷。

其他解決高度坍塌的方法都是基於這兩個思想的，一個是觸發BFC，一個是添加元素+清除浮動（clear)。

浮動元素會被後一個元素的margin-top影響

<style>        body,p{            margin:0;            padding:0;        }        p{            width:100px;            height:100px;        }        p:nth-of-type(1){            float: left;            background-color: #61dafb;        }        p:nth-of-type(2){            margin-top: 100px;            background-color: #58d3e2;        }    </style><p >p1</p><p>p2</p>

可以看到第一個p也跟著下來了，解決辦法是給後一個元素設定clear，此時後一個元素的margin-top將無效

<style>        body,p{            margin:0;            padding:0;        }        p{            width:100px;            height:100px;        }        p:nth-of-type(1){            float: left;            background-color: #61dafb;        }        p:nth-of-type(2){            clear:both;            margin-top: 100px;            background-color: #58d3e2;        }    </style><p >p1</p><p>p2</p>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

CSS層疊機制使用詳解

CSS實戰項目中書寫規範與順序