css浮動(dòng) float屬性詳解

發(fā)布時(shí)間：2020-02-24 11:14:53 作者：良逸

我要評(píng)論

浮動(dòng)指的是一個(gè)元素脫離文檔流，懸浮在父元素之上的現(xiàn)象。這篇文章給大家介紹css浮動(dòng) float屬性的相關(guān)知識(shí)，感興趣的朋友一起看看吧

一、什么是浮動(dòng)？

浮動(dòng)，顧名思義，就是漂浮的意思。指的是一個(gè)元素脫離文檔流，懸浮在父元素之上的現(xiàn)象。

二、如何產(chǎn)生浮動(dòng)？

給元素本身添加float屬性

float值：

left	元素向左浮動(dòng)。
right	元素向右浮動(dòng)。
none	默認(rèn)值。元素不浮動(dòng)，并會(huì)顯示在其在文本中出現(xiàn)的位置。
inherit	規(guī)定應(yīng)該從父元素繼承 float 屬性的值。

三、浮動(dòng)有什么作用？

作用：在html文檔流中，分為行元素、塊元素和行內(nèi)塊元素，

行元素和行內(nèi)塊元素都是以橫向排列的，而塊元素則是以流的形式從上往下排列的，當(dāng)我們想使塊元素橫向排列時(shí)，就用到了我們的浮動(dòng)(float)。

當(dāng)給一個(gè)塊級(jí)元素添加浮動(dòng)時(shí)本來(lái)應(yīng)該豎向排列的元素開(kāi)始橫向排列的，如下圖所示：

.box {border: 1px solid #666;height: 700px;width: 700px;color: #fff;}
.box1 {float: left; width: 100px; height: 100px; background: #000;}
.box2 {float: left; width: 100px; height: 100px; background: red; }
.box3 {width: 200px; float: left; height: 200px; background: yellow; }
.box4 {width: 300px; float: left; height: 300px; background: blue; }
.box5 {float: left; width: 300px; height: 400px; background: green;}
<div class="box"> <div class="box1"> box1 </div> <div class="box2"> box2 </div> <div class="box3"> box3 </div> <div class="box4"> box4 </div> <div class="box5"> box5 </div> </div>

四、浮動(dòng)帶來(lái)的問(wèn)題

當(dāng)給了一個(gè)元素浮動(dòng)時(shí)元素脫離文檔流，會(huì)產(chǎn)生一個(gè)致命問(wèn)題：父元素高度塌陷(以上面的為例子):

.box {border: 1px solid #666; width: 800px;color: #fff;}
.box1 {float: left; width: 100px; height: 100px; background: #000;}
.box2 {float: left; width: 100px; height: 100px; background: red; }
.box3 {width: 200px; float: left; height: 200px; background: yellow; }
.box4 {width: 300px; float: left; height: 300px; background: blue; }
.box5 {float: left; width: 300px; height: 400px; background: green;}
.on { width: 50px; height: 300px; background: pink; }
<div class="box">
        <div class="box1">  box1  </div>
        <div class="box2">  box2  </div>
        <div class="box3">  box3  </div>
        <div class="box4">  box4 </div>
        <div class="box5">  box5  </div>
</div>
<div class="on"> </div>

當(dāng)我不給父級(jí)元素box添加高度時(shí)box高度為0，并且box的兄弟元素會(huì)往上擠；而浮動(dòng)元素將會(huì)把父級(jí)兄弟元素on覆蓋：

五、如何解決(優(yōu)缺點(diǎn))？

(1)父級(jí)div定義 height

<style type="text/css">
/*解決代碼*/
.div1{background:#000080;border:1px solid red; height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無(wú)法自動(dòng)獲取到高度的問(wèn)題。

優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、容易掌握

缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問(wèn)題

建議：不推薦使用，只建議高度固定的布局時(shí)使用

(2)結(jié)尾處加空div標(biāo)簽 clear:both;

<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮動(dòng)代碼*/
.clearfloat{clear:both;height:0;overflow:hidden;}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>

原理：添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度

優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問(wèn)題

缺點(diǎn)：不少初學(xué)者不理解原理；如果頁(yè)面浮動(dòng)布局多，就要增加很多空div，讓人感覺(jué)很不好

建議：不推薦使用，但此方法是以前主要使用的一種清除浮動(dòng)方法

(3)父級(jí)div定義偽對(duì)象:after 和 zoom

<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮動(dòng)代碼*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;overflow:hidden;}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類(lèi)似，zoom(IE專(zhuān)有屬性)可解決ie6,ie7浮動(dòng)問(wèn)題

優(yōu)點(diǎn)：瀏覽器支持好、不容易出現(xiàn)怪問(wèn)題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）

缺點(diǎn)：代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。

建議：推薦使用，建議定義公共類(lèi)，以減少CSS代碼。

(4)父級(jí)div定義 overflow:hidden

<style type="text/css">
/*解決代碼*/
.div1{background:#000080;border:1px solid red; width:98%;overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度

優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好

缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏。

建議：只推薦沒(méi)有使用position或?qū)verflow:hidden理解比較深的朋友使用。

(5)父級(jí)div定義 overflow:auto

<style type="text/css">
/*解決代碼*/
.div1{background:#000080;border:1px solid red; width:98%;overflow:auto}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:auto時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度

優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好

缺點(diǎn)：內(nèi)部寬高超過(guò)父級(jí)div時(shí)，會(huì)出現(xiàn)滾動(dòng)條。

建議：不推薦使用，如果你需要出現(xiàn)滾動(dòng)條或者確保你的代碼不會(huì)出現(xiàn)滾動(dòng)條就使用吧。

(6)父級(jí)div 也一起浮動(dòng)

<style type="text/css">
/*解決代碼*/
.div1{background:#000080;border:1px solid red; width:98%;margin-bottom:10px;float:left}
/*解決代碼*/
.div2{background:#800080;border:1px solid red;height:100px;width:98%;clear:both}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：所有代碼一起浮動(dòng)，就變成了一個(gè)整體

優(yōu)點(diǎn)：沒(méi)有優(yōu)點(diǎn)

缺點(diǎn)：會(huì)產(chǎn)生新的浮動(dòng)問(wèn)題。

建議：不推薦使用，只作了解。

(7)父級(jí)div定義 display:table

<style type="text/css">
;/*解決代碼*/
.div1{background:#000080;border:1px solid redwidth:98%;display:table;margin-bottom:10px;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：將div屬性變成表格

優(yōu)點(diǎn)：沒(méi)有優(yōu)點(diǎn)

缺點(diǎn)：會(huì)產(chǎn)生新的未知問(wèn)題。

建議：不推薦使用，只作了解。

(8)結(jié)尾處加 br標(biāo)簽 clear:both

style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.div2{background:#800080;border:1px solid red;height:100px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
div2
</div>

原理：父級(jí)div定義zoom:1來(lái)解決IE浮動(dòng)問(wèn)題，結(jié)尾處加 br標(biāo)簽 clear:both

總結(jié)

到此這篇關(guān)于css浮動(dòng) float屬性詳解的文章就介紹到這了,更多相關(guān)css float內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！