成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Chao / 654人閱讀

摘要：一浮動(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ì)無視它往上接到A元素前面的元素之后(PS:但是文字并不會(huì)無視它，還會(huì)環(huán)繞A元素，也就是A元素沒有脫離文字流，

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

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

二、BFC

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

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

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

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

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

三、 清除浮動(dòng)的方法

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

  • 通過在浮動(dòng)元素末尾添加一個(gè)空的標(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)會(huì)造成代碼量增加。

偽元素還有一種寫法

// 用display:table 是為了避免外邊距margin重疊導(dǎo)致的margin塌陷, 內(nèi)部元素默認(rèn)會(huì)成為 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)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素，還會(huì)導(dǎo)致中鍵失效（鼠標(biāo)中鍵）。

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

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

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

  • 父元素也浮動(dòng)

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

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

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

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

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

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

參考

那些年我們一起清除過的浮動(dòng)

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

理解CSS布局和BFC

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

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

相關(guān)文章

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

    摘要：清除浮動(dòng)并不是說讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對排在該元素前面的元素。 我在做頁面布局的時(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 評論0 收藏0

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

    摘要：清除浮動(dòng)并不是說讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對排在該元素前面的元素。 我在做頁面布局的時(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 評論0 收藏0

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

    摘要：清除浮動(dòng)并不是說讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對排在該元素前面的元素。 我在做頁面布局的時(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í)...

    Donald 評論0 收藏0

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

    摘要：清除浮動(dòng)并不是說讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對排在該元素前面的元素。 我在做頁面布局的時(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í)...

    ideaa 評論0 收藏0

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

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

    劉東 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<