css浮動 float屬性詳解

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

我要評論

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

一、什么是浮動？

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

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

給元素本身添加float屬性

float值：

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

三、浮動有什么作用？

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

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

當(dāng)給一個塊級元素添加浮動時本來應(yīng)該豎向排列的元素開始橫向排列的，如下圖所示：

.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)給了一個元素浮動時元素脫離文檔流，會產(chǎ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)我不給父級元素box添加高度時box高度為0，并且box的兄弟元素會往上擠；而浮動元素將會把父級兄弟元素on覆蓋：

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

(1)父級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>

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

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

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

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

(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}
/*清除浮動代碼*/
.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>

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度

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

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

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

(3)父級div定義偽對象: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}
/*清除浮動代碼*/
.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)類似，zoom(IE專有屬性)可解決ie6,ie7浮動問題

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

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

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

(4)父級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，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度

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

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

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

(5)父級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，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區(qū)域的高度

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

缺點(diǎn)：內(nèi)部寬高超過父級div時，會出現(xiàn)滾動條。

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

(6)父級div 也一起浮動

<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>

原理：所有代碼一起浮動，就變成了一個整體

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

缺點(diǎn)：會產(chǎn)生新的浮動問題。

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

(7)父級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)：沒有優(yōu)點(diǎn)

缺點(diǎn)：會產(chǎ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>

原理：父級div定義zoom:1來解決IE浮動問題，結(jié)尾處加 br標(biāo)簽 clear:both

總結(jié)

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