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

資訊專(zhuān)欄INFORMATION COLUMN

Bootstrap清除浮動(dòng)的實(shí)現(xiàn)原理

劉德剛 / 2795人閱讀

摘要：當(dāng)中包含屬性時(shí)，如果沒(méi)有包含空格，會(huì)造成清除浮動(dòng)元素的頂部底部有一個(gè)空白設(shè)置也可以解決這個(gè)問(wèn)題。這樣做，其一是為了和其他清除浮動(dòng)的方式的效果保持一致其二，是為了與下設(shè)置后的效果一致即阻止合并的效果。

Boostrap清除浮動(dòng)的css如下：

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.clearfix {
    *zoom: 1;
}

:after偽類(lèi)在元素末尾插入了一個(gè)包含空格的字符，并設(shè)置display為table

display:table會(huì)創(chuàng)建一個(gè)匿名的table-cell，從而觸發(fā)塊級(jí)上下文（BFC），因?yàn)槿萜鲀?nèi)float的元素也是BFC，由于BFC有不能互相重疊的特性，并且設(shè)置了clear: both，:after插入的元素會(huì)被擠到容器底部，從而將容器撐高。并且設(shè)置display:table后，content中的空格字符會(huì)被渲染為0*0的空白元素，不會(huì)占用頁(yè)面空間。

content包含一個(gè)空格，是為了解決Opera瀏覽器的BUG。當(dāng)HTML中包含contenteditable屬性時(shí)，如果content沒(méi)有包含空格，會(huì)造成清除浮動(dòng)元素的頂部、底部有一個(gè)空白（設(shè)置font-size：0也可以解決這個(gè)問(wèn)題）。

:after偽類(lèi)的設(shè)置已經(jīng)達(dá)到了清除浮動(dòng)的目的，但還要設(shè)置:before偽類(lèi)，原因如下

:before的設(shè)置也觸發(fā)了一個(gè)BFC，由于BFC有內(nèi)部布局不受外部影響的特性，因此:before的設(shè)置可以阻止margin-top的合并。

這樣做，其一是為了和其他清除浮動(dòng)的方式的效果保持一致；其二，是為了與ie6/7下設(shè)置zoom：1后的效果一致（即阻止margin-top合并的效果）。

zoom: 1用于在ie6/7下觸發(fā)haslayout和contain floats

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

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

相關(guān)文章

  • 重拾css(9)——float

    摘要：導(dǎo)致這一現(xiàn)象的最根本原因在于被設(shè)置了的元素會(huì)脫離文檔流。脫離文檔流可以理解為子元素與父元素間的結(jié)構(gòu)被破壞，父子關(guān)系解除。 1.引言 對(duì)于我們所有的web前端開(kāi)發(fā)人員，float是或者曾經(jīng)一度是你最熟悉的陌生人——你離不開(kāi)它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡(jiǎn)單就那么一點(diǎn)知識(shí)，但卻駕馭不了它各種奇怪的現(xiàn)象。這就是我們又愛(ài)又恨的——float。所以，系統(tǒng)的學(xué)一學(xué)float是非常...

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

  • 關(guān)于BFC的一些思考

    摘要：兩個(gè)值都是正值，取最大值，都是負(fù)值，取最小值，一正一負(fù)則相加。使回到正常位置。需要注意的是使用會(huì)把放在最前邊。而可以按照，，的順序放置。另外布局也不會(huì)出現(xiàn)中間擠掉兩邊的情況。 Question 以下三個(gè)div將會(huì)會(huì)如何放置(margin collapsing)？ body { margin: 0; } .first { margin: 20px; hei...

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

  • 前端面試之路一(HTML+CSS面試整理)

    摘要：或表示紅色，表示綠色，表示藍(lán)色，也可取其他數(shù)值來(lái)指定顏色。針對(duì)多字節(jié)文字，中文句子也是單詞允許在單詞內(nèi)換行。 一、HTML基礎(chǔ) html常見(jiàn)元素和理解 html常見(jiàn)元素分類(lèi) head區(qū)元素：（不會(huì)在頁(yè)面上留下直接內(nèi)容） meta title style link script base body區(qū)： div/selection/article/aside/header/f...

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

  • 前端面試之路一(HTML+CSS面試整理)

    摘要：或表示紅色，表示綠色，表示藍(lán)色，也可取其他數(shù)值來(lái)指定顏色。針對(duì)多字節(jié)文字，中文句子也是單詞允許在單詞內(nèi)換行。 一、HTML基礎(chǔ) html常見(jiàn)元素和理解 html常見(jiàn)元素分類(lèi) head區(qū)元素：（不會(huì)在頁(yè)面上留下直接內(nèi)容） meta title style link script base body區(qū)： div/selection/article/aside/header/f...

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

  • CSS

    摘要：在元素之后添加內(nèi)容控制表單控件的禁用狀態(tài)。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。雙冒號(hào)是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類(lèi)和偽元素。 1.介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ 有兩種，?IE 盒子模型、W3C 盒子模型； 盒模型：?內(nèi)容(content)、填充(padding)、邊界(margin)、?邊框(border)；區(qū)? 別：?IE的cont...

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

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

0條評(píng)論

閱讀需要支付1元查看
<