成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

浮動(dòng)和清除浮動(dòng)

only_do / 3278人閱讀

摘要：浮動(dòng)在我看來浮動(dòng)元素都是脫離了軀殼的靈魂，有其神而無其形沒有高度，他們存在于世間，但世人卻無法看見他們脫離文檔流，塊級(jí)元素可占據(jù)他們的位置，但是風(fēng)雨等大自然因素卻可以洞察到他們的存在，從而環(huán)繞其周圍不脫離文本流，內(nèi)聯(lián)元素可環(huán)繞在其周圍。

浮動(dòng) 
在我看來浮動(dòng)元素都是脫離了軀殼的靈魂，有其神而無其形(沒有高度)，他們存在于世間，但世人卻無法看見他們（脫離文檔流，塊級(jí)元素可占據(jù)他們的位置），但是風(fēng)雨等大自然因素卻可以洞察到他們的存在，從而環(huán)繞其周圍（不脫離文本流，內(nèi)聯(lián)元素可環(huán)繞在其周圍）。

浮動(dòng)元素的外邊距不會(huì)合并

浮動(dòng)非替換元素時(shí)必須設(shè)定寬度

浮動(dòng)元素會(huì)脫離文檔流但不會(huì)脫離文本流，因而會(huì)造成文本環(huán)繞效果，而這也是浮動(dòng)的本意。

不管是塊級(jí)元素還是內(nèi)聯(lián)元素，一旦浮動(dòng)就會(huì)變成行內(nèi)塊元素（即display: inline-block;）

如果浮動(dòng)元素應(yīng)用了負(fù)外邊距而導(dǎo)致其與相鄰元素重疊，分兩種情況：

行內(nèi)框與一個(gè)浮動(dòng)元素重疊時(shí)，其邊框、背景和內(nèi)容都在該浮動(dòng)元素之上顯示

塊框與一個(gè)浮動(dòng)元素重疊時(shí)，其邊框和背景都在該浮動(dòng)元素之下顯示，而內(nèi)容在浮動(dòng)元素之上顯示

清除浮動(dòng) 
上面提到過浮動(dòng)元素是不具備高度的，因此會(huì)造成父元素高度塌陷，可以通過以下方法來清除浮動(dòng)。不僅要知道什么方式可以清除浮動(dòng)，更要知道這些方法是如何清除浮動(dòng)的。
浮動(dòng)父元素

CSS 2.1中提到了浮動(dòng)的一個(gè)特性：浮動(dòng)元素會(huì)延伸，從而包含其所有后代元素。但這有點(diǎn)拆了東墻補(bǔ)西墻的意味，不推薦。
應(yīng)用對(duì)象：父元素

overflow屬性

overflow 屬性本意是規(guī)定了當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。但當(dāng)其屬性值為hidden或auto時(shí)，它會(huì)自動(dòng)的清理包含的任何浮動(dòng)元素，也就意味著它是認(rèn)可浮動(dòng)元素的高度的。但在某些情況下，使用該方法會(huì)產(chǎn)生滾動(dòng)條或截?cái)鄡?nèi)容。所以使用時(shí)需謹(jǐn)慎。
應(yīng)用對(duì)象：父元素

clear屬性

clear屬性會(huì)給該元素添加足夠的外邊距，從而達(dá)到清除浮動(dòng)的效果。clear 屬性的值可以是：left、right、both或none。
應(yīng)用對(duì)象：相鄰元素

偽元素

在沒有現(xiàn)成元素可以應(yīng)用clear屬性時(shí)，我們可以使用偽元素：

 .clearfix::after {
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

注：after 會(huì)在元素內(nèi)容后面而不是元素后面插入一個(gè)偽元素。
應(yīng)用對(duì)象：父元素

空元素

當(dāng)然，我們也可以直接在浮動(dòng)元素后面添加一個(gè)空元素，如下：

同樣可以達(dá)到清除浮動(dòng)的效果，但會(huì)增加不必要的代碼，不推薦。

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

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

相關(guān)文章

  • css浮動(dòng)現(xiàn)象及清除浮動(dòng)的方法

    css浮動(dòng)現(xiàn)象及清除浮動(dòng)的方法 ? 首先先明確浮動(dòng)最初的定義及使用場(chǎng)景：實(shí)現(xiàn)文本環(huán)繞圖片的效果。 除了用浮動(dòng)外，目前暫無其他方法實(shí)現(xiàn)文本環(huán)繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動(dòng)的具體定義： 浮動(dòng)的框可以左右移動(dòng)，直至它的外邊緣遇到包含框或者另一個(gè)浮動(dòng)框的邊緣。浮動(dòng)框不...

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

  • css浮動(dòng)現(xiàn)象及清除浮動(dòng)的方法

    css浮動(dòng)現(xiàn)象及清除浮動(dòng)的方法 ? 首先先明確浮動(dòng)最初的定義及使用場(chǎng)景：實(shí)現(xiàn)文本環(huán)繞圖片的效果。 除了用浮動(dòng)外，目前暫無其他方法實(shí)現(xiàn)文本環(huán)繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動(dòng)的具體定義： 浮動(dòng)的框可以左右移動(dòng)，直至它的外邊緣遇到包含框或者另一個(gè)浮動(dòng)框的邊緣。浮動(dòng)框不...

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

  • 關(guān)于浮動(dòng)與清除浮動(dòng)，你應(yīng)該知道的

    摘要：清除浮動(dòng)并不是說讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。 我在做頁(yè)面布局的時(shí)候，多多少少總會(huì)受到來自浮動(dòng)的困擾，因此專門通過實(shí)踐來總結(jié)一下浮動(dòng)與清除浮動(dòng)。 首先總結(jié)幾個(gè)基礎(chǔ)的概念： 浮動(dòng)：設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，不會(huì)影響塊元素的布局，但是會(huì)影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會(huì)單個(gè)元素獨(dú)占一行 接下來我們通過實(shí)...

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

  • 關(guān)于浮動(dòng)與清除浮動(dòng)，你應(yīng)該知道的

    摘要：清除浮動(dòng)并不是說讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。 我在做頁(yè)面布局的時(shí)候，多多少少總會(huì)受到來自浮動(dòng)的困擾，因此專門通過實(shí)踐來總結(jié)一下浮動(dòng)與清除浮動(dòng)。 首先總結(jié)幾個(gè)基礎(chǔ)的概念： 浮動(dòng)：設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，不會(huì)影響塊元素的布局，但是會(huì)影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會(huì)單個(gè)元素獨(dú)占一行 接下來我們通過實(shí)...

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

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

0條評(píng)論

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