清除浮動的原理和方法

問題的由來：

在CSS規(guī)范中，浮動定位是脫離元素正常流的。所以，只要含有浮動元素的父容器，在顯示時不考慮子元素的位置，就當(dāng)它們不存在一樣。這就造成了顯示出來，父容器好像空容器一樣。

比如下面代碼：

1 <div class="box">

2 <div style="float:left;width:100px;height:100px;"></div>

3 <div style="float:right;width:100px;height:100px"></div>

4 </div>

在瀏覽器中一運行，實際視圖是子元素顯示在父容器的外部。

解決方法一：添加空元素

在浮動元素下面添加一個非浮動的元素

代碼如下：

復(fù)制代碼

1 <div class="box">

2 　　<div style="float:left;width:100px;height:100px;"></div>

3 　　<div style="float:right;width:100px;height:100px;"></div>

4 　　<div class="clearfix"></div>

5 </div>

6

7 <style>

8 .clearfix{

9 clear:both;

10 }

11 </style>

復(fù)制代碼

解決方法二：浮動的父容器

將父容器也改成浮動定位，這樣它就可以帶著子元素一起浮動了

代碼如下：

復(fù)制代碼

1 <div class="box">

2 <div style="float:left;width:100px;height:100px;"></div>

3 <div style="float:right;width:100px;height:100px;"></div>

4 </div>

5

6 <style>

7 .box{

8 float:left;

9 }

10 </style>

復(fù)制代碼

解決方法三：浮動元素的自動clearing

讓父容器變得可以自動"清理"（clearing）子元素的浮動，從而能夠識別出浮動子元素的位置，不會出現(xiàn)顯示上的差錯。

代碼如下：

復(fù)制代碼

1 <div class="box">

2 　　<div style="float:left;width:100px;height:100px;"></div>

3 　　<div style="float:right;width:100px;height:100px;"></div>

4 </div>

5

6 <style>

7 .box{

8 overflow:hidden;

9 }

10 </style>

復(fù)制代碼

解決方法四：通過CSS語句添加子元素，這樣就不用修改HTML代碼

就是用after偽元素的方法在容器尾部自動創(chuàng)建一個元素的方法

代碼如下：

復(fù)制代碼

1 <div class="box">

2 　　<div style="float:left;width:100px;height:100px;"></div>

3 　　<div style="float:right;width:100px;height:100px;"></div>

4 </div>

5

6 <style>

7 .box:after {

8 content: "\0020";

9 display: block;

10 height: 0;

11 clear: both;

12 zoom:1;

13 }

14 </style>

當(dāng)前名稱：清除浮動的原理和方法
當(dāng)前鏈接：http://www.muchs.cn/news39/145739.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、ChatGPT、小程序開發(fā)、品牌網(wǎng)站建設(shè)、定制開發(fā)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)