css中float屬性的使用示例

這篇文章將為大家詳細講解有關css中float屬性的使用示例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、什么是浮動？

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

二、如何產生浮動？

給元素本身添加float屬性

float值：

三、浮動有什么作用？

作用：在html文檔流中，分為行元素、塊元素和行內塊元素，

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

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

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

四、浮動帶來的問題

當給了一個元素浮動時元素脫離文檔流，會產生一個致命問題：父元素高度塌陷(以上面的為例子):

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

當我不給父級元素box添加高度時box高度為0，并且box的兄弟元素會往上擠；而浮動元素將會把父級兄弟元素on覆蓋：

五、如何解決(優缺點)？

(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無法自動獲取到高度的問題。

優點：簡單、代碼少、容易掌握

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

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

(2)結尾處加空div標簽 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能自動獲取到高度

優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題

缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空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有點類似，zoom(IE專有屬性)可解決ie6,ie7浮動問題

優點：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）

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

建議：推薦使用，建議定義公共類，以減少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時，瀏覽器會自動檢查浮動區域的高度

優點：簡單、代碼少、瀏覽器支持好

缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。

建議：只推薦沒有使用position或對overflow: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時，瀏覽器會自動檢查浮動區域的高度

優點：簡單、代碼少、瀏覽器支持好

缺點：內部寬高超過父級div時，會出現滾動條。

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

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

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

優點：沒有優點

缺點：會產生新的浮動問題。

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

(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屬性變成表格

優點：沒有優點

缺點：會產生新的未知問題。

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

(8)結尾處加 br標簽 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浮動問題，結尾處加 br標簽 clear:both

關于“css中float屬性的使用示例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。