亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

那些年使用過的清除浮動(dòng)的方法

wqj97 / 1361人閱讀

摘要：浮動(dòng)使元素框向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。由于浮?dòng)框脫離了文檔的普通流，所以文檔的普通流中的框表現(xiàn)得就像浮動(dòng)框不存在一樣。

浮動(dòng)使元素框向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>

由于浮動(dòng)框脫離了文檔的普通流，所以文檔的普通流中的框表現(xiàn)得就像浮動(dòng)框不存在一樣。

這段代碼：

 style 
 .parent {
 width: 500px;
 margin: 0 auto;
 .left {
 float: left;
 list-style: none;
 padding-right: 5px;
 /style 
 div 
 li 111 /li 
 li 222 /li 
 li 333 /li 
 /ul 
 div 這是第一個(gè)內(nèi)容 /div 
 div 這是第二個(gè)內(nèi)容 /div 
 div 這是第二個(gè)內(nèi)容 /div 
 /div

對(duì)三個(gè)li進(jìn)行左浮動(dòng)。我們預(yù)想的是div0的內(nèi)容在同一行顯示，其他的各自展示在一行中。然而事實(shí)是，div1緊跟在div0后，這便是浮動(dòng)造成的影響。

浮動(dòng)解決方法：

1、浮動(dòng)元素父級(jí)設(shè)高法

也就是給div0設(shè)置一個(gè)高度。來(lái)看看效果：

.div0 { height: 30px; }

很好的解決了問題，不過平時(shí)我們?cè)谑褂弥胁荒芫_的得出元素的高度，所以這個(gè)方法不太實(shí)用。

2、空div清除浮動(dòng)

也就是給浮動(dòng)元素后面加一個(gè)空的div標(biāo)簽，設(shè)置clear屬性來(lái)清除浮動(dòng)：

 style 
 .clear { clear: both }
 /style 

 div 
 li 111 /li 
 li 222 /li 
 li 333 /li 
 /ul 
 div /div 
 div 這是div1 /div 
 div 這是div2 /div 
 div 這是div3 /div 
 /div

clear 屬性定義了元素的哪邊不允許出現(xiàn)浮動(dòng)元素,這里也可以設(shè)置為clear: left。在這里直接給div1一個(gè)clear樣式能起到同樣的效果。

3、浮動(dòng)元素父級(jí)設(shè)overflow:hidden/auto法

和第一種方法一樣，只需要給div0加一個(gè)overflow屬性：

.div0 {
 overflow: hidden;
 *zoom: 1 // 兼容ie7/6,*號(hào)表示只在ie7以下版本生效
}

overflow本意是對(duì)溢出元素框的內(nèi)容做處理。在這里用，剛好可以撐開父元素的高度。

4、浮動(dòng)元素父級(jí)設(shè)display:inline-block

.div0 { display: inline-block}

這種方式有種缺點(diǎn)，會(huì)使margin: 0 auto居中方式失效。

給div0增加一個(gè)寬度并且設(shè)置居中,并且用上面三種方式之一清除浮動(dòng)后效果是這樣:

 .div0 {
 overflow: auto; //清除浮動(dòng)
 width: 100px;
 margin: 0 auto; // 居中
 }

但是使用display: inline-block清除浮動(dòng)，margin居中失效：

 .div0 {
 display: inline-block; //清除浮動(dòng)
 width: 100px;
 margin: 0 auto; // 居中
 }

5、偽類after清除浮動(dòng)法

目前最常用也最好用的清除浮動(dòng)方法。ie需要設(shè)置zoom觸發(fā)hasLayout。

 style 
 .clearFix {
 *zoom: 1
 .clearFix:after {
 display: block;
 content: "";
 width: 0;
 height: 0;
 font-size: 0;
 clear: both;
 visibility: hidden;
 overflow: hidden
 /style 
 div 
 li 111 /li 
 li 222 /li 
 li 333 /li 
 /ul 
 div 這是div1 /div 
 div 這是div2 /div 
 div 這是div3 /div 
 /div

?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/801.html

相關(guān)文章

  • 那些年使用過的清除浮動(dòng)的方法

    摘要：浮動(dòng)使元素框向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。由于浮?dòng)框脫離了文檔的普通流，所以文檔的普通流中的框表現(xiàn)得就像浮動(dòng)框不存在一樣。浮動(dòng)使元素框向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?由于浮動(dòng)框脫離了文檔的普通流，所以文檔的普通流中的框表現(xiàn)得就像浮動(dòng)框不存在一樣。 這段代碼： .parent { width: ...

    AbnerMing 評(píng)論0 收藏0

  • 理解CSS浮動(dòng)與清理

    摘要：浮動(dòng)為什么會(huì)有文本環(huán)繞效果產(chǎn)生這個(gè)疑問主要來(lái)自于以往的印象浮動(dòng)的元素是脫離文檔流的。也就是說，浮動(dòng)元素的確脫離了文檔流，因此文檔流中的塊框會(huì)無(wú)視浮動(dòng)的元素，但是文本不會(huì)。 作為前端寫了很多頁(yè)面布局，但是浮動(dòng)這塊一直是我似懂非懂的盲點(diǎn)，一方面用浮動(dòng)能實(shí)現(xiàn)很多布局，另一方面浮動(dòng)造成的影響又會(huì)破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點(diǎn)。 本文主要討論以下幾個(gè)問題：1.浮動(dòng)的原始用途...

    Tonny 評(píng)論0 收藏0

  • 理解CSS浮動(dòng)與清理

    摘要：浮動(dòng)為什么會(huì)有文本環(huán)繞效果產(chǎn)生這個(gè)疑問主要來(lái)自于以往的印象浮動(dòng)的元素是脫離文檔流的。也就是說，浮動(dòng)元素的確脫離了文檔流，因此文檔流中的塊框會(huì)無(wú)視浮動(dòng)的元素，但是文本不會(huì)。 作為前端寫了很多頁(yè)面布局，但是浮動(dòng)這塊一直是我似懂非懂的盲點(diǎn)，一方面用浮動(dòng)能實(shí)現(xiàn)很多布局，另一方面浮動(dòng)造成的影響又會(huì)破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點(diǎn)。 本文主要討論以下幾個(gè)問題：1.浮動(dòng)的原始用途...

    cyqian 評(píng)論0 收藏0

  • 浮動(dòng)與浮動(dòng)的清除

    摘要：一浮動(dòng)一浮動(dòng)說浮動(dòng)就必須提及一下文檔流，當(dāng)中的元素按照從左到右，從上到下的順序進(jìn)行排列稱之為文檔流，也就是正常排列。一、浮動(dòng) 說浮動(dòng)就必須提及一下文檔流，HTML當(dāng)中的元素按照從左到右，從上到下的順序進(jìn)行排列稱之為文檔流，也就是正常排列。 而浮動(dòng)是什么呢？浮動(dòng)會(huì)讓元素脫離文檔流，假如A元素浮動(dòng)了，原本排在該元素之后的元素發(fā)現(xiàn)A元素不在這個(gè)文檔流了，就會(huì)無(wú)視它往上接到A元素前面的元素之后(PS...

    Chao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<