免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

清除浮動的原理和方法

2022-04-16    分類: 網(wǎng)站建設(shè)

問題的由來:

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

比如下面代碼:

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>

當前名稱:清除浮動的原理和方法
當前鏈接:http://m.newbst.com/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)

外貿(mào)網(wǎng)站建設(shè)