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

資訊專欄INFORMATION COLUMN

浮動與浮動的清除

Chao / 612人閱讀

摘要：一浮動一浮動說浮動就必須提及一下文檔流，當(dāng)中的元素按照從左到右，從上到下的順序進(jìn)行排列稱之為文檔流，也就是正常排列。

一、浮動

說浮動就必須提及一下文檔流，HTML當(dāng)中的元素按照從左到右，從上到下的順序進(jìn)行排列稱之為文檔流，也就是正常排列。

而浮動是什么呢？浮動會讓元素脫離文檔流，假如A元素浮動了，原本排在該元素之后的元素發(fā)現(xiàn)A元素不在這個文檔流了，就會無視它往上接到A元素前面的元素之后(PS:但是文字并不會無視它，還會環(huán)繞A元素，也就是A元素沒有脫離文字流，

而如果使用position的絕對定位會連文字流也脫離文檔流。

浮動的好處當(dāng)然是布局了，例如通過浮動來形成三列布局，文字環(huán)繞等等。但是浮動也有一個問題，那就是會導(dǎo)致高度的塌陷，就像上面的圖片顯示，父元素的高度塌陷了，并沒有將浮動的子元素包裹進(jìn)去，這樣子就會造成布局上的錯誤。

二、BFC

什么是BFC？BFC是Block Formatting Context的縮寫，也就是塊級格式化上下文，創(chuàng)建BFC有以下情況：

  • float的值不為none。
  • overflow的值不為visible。
  • display的值為table-cell, table-caption, inline-block中的任何一個。
  • position的值不為relative和static。

BFC的特性就是包裹浮動的元素。按照我的理解，當(dāng)你創(chuàng)建BFC之后元素就會把里面的東西視為自己的東西，包括浮動元素，然后創(chuàng)建一個私有領(lǐng)域給包裹進(jìn)來。此外BFC還有還有如下特性。

1.讓原本會疊加的上下外邊距疊加無效。將想要邊距失效的兩個盒子分別放入一個父盒子，然后為父盒子創(chuàng)建BFC。

2.創(chuàng)建BFC的元素將不會圍繞浮動元素，圖中文字用p標(biāo)簽包裹并創(chuàng)建BFC，右上角浮動元素，可以看見文字并沒有環(huán)繞浮動元素。

三、 清除浮動的方法

清除浮動方法大致有兩類，一類是clear:both | left | right ,另一類則是創(chuàng)建BFC,細(xì)分又可以分為多種。

  • 通過在浮動元素末尾添加一個空的標(biāo)簽例如并設(shè)置樣式為clear:both | left | right ，其他標(biāo)簽br等亦可。

優(yōu)點(diǎn)：簡單。

缺點(diǎn)：增加了額外的標(biāo)簽，并且很顯然這并不符合語義化。

*使用 br標(biāo)簽和其自身的 html屬性，br 有 clear=all | left | right | none；的屬性。

優(yōu)點(diǎn)：簡單代碼量少，比空標(biāo)簽語義化稍好。

缺點(diǎn)：同上。

  • 使用::after偽元素(萬金油方法)

ps:由于IE6-7不支持:after，使用`zoom:1觸發(fā)hasLayout。其實(shí)是通過 content 在元素的后面生成了內(nèi)容為空的塊級元素

代碼如下

.clearfix:after {
    content:"";
    display:block;
    height:0;
    visibility:hidden;//這一條可以省略，證明請看原文精益求精部分
    clear:both; 
}
.clearfix {
    zoom:1;
}

優(yōu)點(diǎn)：結(jié)構(gòu)和語義化完全正確,代碼量居中。

缺點(diǎn)：復(fù)用方式不當(dāng)會造成代碼量增加。

偽元素還有一種寫法

// 用display:table 是為了避免外邊距margin重疊導(dǎo)致的margin塌陷, 內(nèi)部元素默認(rèn)會成為 table-cell 單元格的形式
.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
    overflow:hidden;
}
.clearfix{
    zoom:1; 
}
  • 父元素設(shè)置 overflow：hidden,(PS:在IE6中還需要觸發(fā) hasLayout ，例如 zoom:1)

優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語義化問題，代碼量極少。

缺點(diǎn)：由于hidden的原因，當(dāng)內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素，還會導(dǎo)致中鍵失效（鼠標(biāo)中鍵）。

  • 父元素設(shè)置 overflow：auto 屬性

優(yōu)點(diǎn)：同上

缺點(diǎn)：多個嵌套后，會有bug，詳情看原文。

  • 父元素也浮動

優(yōu)點(diǎn)：代碼少

缺點(diǎn)：總不能一直浮動到body吧。

  • 父元素設(shè)置display:table

優(yōu)點(diǎn)：結(jié)構(gòu)語義化完全正確，代碼量極少。

缺點(diǎn)：會造成盒模型的改變。

其余的參考上面如何創(chuàng)建BFC。

參考

那些年我們一起清除過的浮動

關(guān)于Block Formatting Context－－BFC和IE的hasLayout

理解CSS布局和BFC

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

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

相關(guān)文章

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

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

    mengbo 評論0 收藏0

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

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

    masturbator 評論0 收藏0

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

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

    Donald 評論0 收藏0

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

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

    ideaa 評論0 收藏0

  • 理解CSS浮動與清除浮動

    摘要：那我們舉個栗子當(dāng)先聲明一個元素向左浮動時，由于脫離文檔流，這個元素的右邊就會空出一片空間，空間的長寬與浮動元素長寬相同?？偨Y(jié)總結(jié)下來，浮動與清除浮動的順序關(guān)系如下設(shè)置元素浮動，元素脫離文檔流，不計算高度。 本文主要探討兩個問題： 為什么CSS設(shè)置浮動會引起父元素塌陷 為什么設(shè)置clear:both能清除浮動，并撐開父元素。 起因 CSS的浮動，算是我在寫網(wǎng)頁時用的最多的屬性之一。但...

    劉東 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<