我們對(duì)元素進(jìn)行了浮動(dòng)(float)時(shí)，我們的元素就會(huì)脫離文檔流，像一只小船一樣漂流在文檔之上。

在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。
float主要流行與頁(yè)面布局，然后沒(méi)有使用后沒(méi)有清除浮動(dòng)，就會(huì)后患無(wú)窮。

知乎上截圖：

分析HTML代碼結(jié)構(gòu)：

<p class="outer">
    <p class="p1">1</p>
    <p class="p2">2</p>
    <p class="p3">3</p>
</p>

分析CSS代碼樣式：

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}.p1{width: 80px;height: 80px;background: red;float: left;}.p2{width: 80px;height: 80px;background: blue;float: left;}.p3{width: 80px;height: 80px;background: sienna;float: left;}

這里我沒(méi)有給最外層的p.outer 設(shè)置高度，但是我們知道如果它里面的元素不浮動(dòng)的話，那么這個(gè)外層的高是會(huì)自動(dòng)被撐開(kāi)的。但是當(dāng)內(nèi)層元素浮動(dòng)后，就出現(xiàn)了影響：

1、父盒子的margin受到影響，無(wú)法實(shí)現(xiàn)左右居中，
2、我沒(méi)有給父盒子設(shè)置高度，浮動(dòng)后父盒子的高度沒(méi)有被撐開(kāi)，圖片中撐開(kāi)的高度是padding帶來(lái)的效果。

清除浮動(dòng)都有哪些方法 ?
清除(clear)也有4個(gè)可能值。最常用的是 both，清楚左右兩邊的浮動(dòng)。left 和 right 只能清楚一個(gè)方向的浮動(dòng)。none 是默認(rèn)值。

方法一：添加新的元素 應(yīng)用 clear：both；
HTML：

<p class="outer">
    <p class="p1">1</p>
    <p class="p2">2</p>
    <p class="p3">3</p>
    <p class="clear"></p>
</p>

CSS：

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

效果：

即：

【補(bǔ)充】：
使用空標(biāo)簽清除浮動(dòng).

方法二：父級(jí)p定義 overflow: auto（注意：是父級(jí)p也就是這里的 p.outer）

HTML：

<p class="outer over-flow"> //這里添加了一個(gè)class    <p class="p1">1</p>
    <p class="p2">2</p>
    <p class="p3">3</p>
    <!--<p class="clear"></p>--></p>

CSS：

.over-flow{    overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問(wèn)題
}

效果圖同上。

原理：使用overflow屬性來(lái)清除浮動(dòng)有一點(diǎn)需要注意，overflow屬性共有三個(gè)屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來(lái)清除浮動(dòng)，但切記不能使用visible值，如果使用這個(gè)值將無(wú)法達(dá)到清除浮動(dòng)效果，其他兩個(gè)值都可以。

【補(bǔ)充】:
使用overflow屬性
此方法有效地解決了通過(guò)空標(biāo)簽元素清除浮動(dòng)而不得不增加無(wú)意代碼的弊端。使用該方法是只需在需要清除浮動(dòng)的元素中定義CSS屬性：overflow:auto，即可。 overflow:auto;是讓高度自適應(yīng)，zoom:1;是為了兼容IE6，也可以用height:1%;%u7684方式來(lái)解決，注意，zoom不符合W3C標(biāo)準(zhǔn)。overflow:hidden也可以實(shí)現(xiàn)。overflow:hidden也可以實(shí)現(xiàn)。

方法三： 據(jù)說(shuō)是最高大上的方法 :after 方法：（注意：作用于浮動(dòng)元素的父親）
先說(shuō)原理：它就是利用:after和:before來(lái)在元素內(nèi)部插入兩個(gè)元素塊，從而達(dá)到清除浮動(dòng)的效果。其實(shí)現(xiàn)原理類(lèi)似于clear:both方法，只是區(qū)別在于:clear在html插入一個(gè)p.clear標(biāo)簽，而outer利用其偽類(lèi)clear:after在元素內(nèi)部增加一個(gè)類(lèi)似于p.clear的效果。下面來(lái)看看其具體的使用方法：

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/.outer:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/

其中clear:both;指清除所有浮動(dòng)；content: ‘.’; display:block;對(duì)于FF/chrome/opera/IE8不能缺少，
其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來(lái)，這樣才能實(shí)現(xiàn)清楚浮動(dòng)。
即：

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;} .clearfix:after {content:'';display:block;clear:both;visibility:hidden;zoom:1;}

 <p class="outer clearfix">

【補(bǔ)充】：

使用after偽對(duì)象清除浮動(dòng)

after偽對(duì)象非IE瀏覽器支持，所以并不影響到IE/WIN瀏覽器。具體寫(xiě)法可參照以下示例。使用中需注意以下幾點(diǎn)。

a、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置height:0，否則該元素會(huì)比實(shí)際高出若干像素；

b、content屬性是必須的，但其值可以為空，藍(lán)色理想討論該方法的時(shí)候content屬性的值設(shè)為”.”

再次again：當(dāng)一個(gè)內(nèi)層元素是浮動(dòng)的時(shí)候，如果沒(méi)有關(guān)閉浮動(dòng)時(shí)，其父元素也就不會(huì)再包含這個(gè)浮動(dòng)的內(nèi)層元素，因?yàn)榇藭r(shí)浮動(dòng)元素已經(jīng)脫離了文檔流。也就是為什么外層不能被撐開(kāi)了！

浮動(dòng)的特點(diǎn):
1.浮動(dòng)的元素，講向左或者向右浮動(dòng)，浮動(dòng)到包圍元素的邊上，或者上一個(gè)浮動(dòng)元素的邊上為止。

2.浮動(dòng)的元素，不再占用空間，且浮動(dòng)元素的層級(jí)要高于普通元素。

3.浮動(dòng)的元素，一定是塊元素，不管之前是什么元素。

4.如果浮動(dòng)的元素沒(méi)有指定寬度的話，浮動(dòng)后會(huì)盡可能變窄，因此浮動(dòng)元素要指定寬和高。

5.一行的多個(gè)元素，要浮動(dòng)大家一起浮動(dòng)。

更多關(guān)于云服務(wù)器，域名注冊(cè)，虛擬主機(jī)的問(wèn)題，請(qǐng)?jiān)L問(wèn)西部數(shù)碼官網(wǎng)：m.ps-sw.cn





猜你還會(huì)喜歡下面的內(nèi)容

• 做一個(gè)獨(dú)立站需要多少錢(qián)
• 西部數(shù)碼怎樣搶注域名
• B2C 電子商務(wù)網(wǎng)站如何做推廣和優(yōu)化
• 網(wǎng)站推廣增加外鏈最好的方法
• 新手站長(zhǎng)淺談：如何在線提升產(chǎn)品轉(zhuǎn)化率
• 網(wǎng)站策劃：九大思維理念助你策劃能力提升
• 如何高效輸出移動(dòng)app產(chǎn)品原型？
• 為什么說(shuō)產(chǎn)品思考是進(jìn)行用戶體驗(yàn)設(shè)計(jì)時(shí)所不可或缺的？
• 六套 App：構(gòu)建我的產(chǎn)品設(shè)計(jì)工作流
• 如果Vine模式重來(lái)，大概就是Biu這個(gè)樣子
• 新手入門(mén)：如何做需求分析
• 產(chǎn)品狗的日常：如何更好的去分解功能點(diǎn)
• 簡(jiǎn)單明了丨如何寫(xiě)出好的PRD
• 產(chǎn)品必修課——輕松搞定UML
• 如果你是個(gè)苦逼的App測(cè)試人員，這款產(chǎn)品或許能拯救你
• 手把手教你制作實(shí)用美觀的交互設(shè)計(jì)文檔

熱門(mén)標(biāo)簽

其他問(wèn)題云服務(wù)器問(wèn)題域名及賬戶問(wèn)題企業(yè)郵局市場(chǎng)咨詢云服務(wù)器云建站/云站群/小程序虛擬主機(jī)網(wǎng)絡(luò)知識(shí)企業(yè)郵箱域名注冊(cè)域名備案域名商標(biāo)注冊(cè)云主機(jī)更多標(biāo)簽...

大家感興趣的內(nèi)容