資訊專欄INFORMATION COLUMN
摘要：當(dāng)中包含屬性時，如果沒有包含空格，會造成清除浮動元素的頂部底部有一個空白設(shè)置也可以解決這個問題。這樣做，其一是為了和其他清除浮動的方式的效果保持一致其二，是為了與下設(shè)置后的效果一致即阻止合并的效果。
Boostrap清除浮動的css如下：
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
*/
.clearfix {
*zoom: 1;
}
:after偽類在元素末尾插入了一個包含空格的字符，并設(shè)置display為table
display:table會創(chuàng)建一個匿名的table-cell，從而觸發(fā)塊級上下文（BFC），因為容器內(nèi)float的元素也是BFC，由于BFC有不能互相重疊的特性，并且設(shè)置了clear: both，:after插入的元素會被擠到容器底部，從而將容器撐高。并且設(shè)置display:table后，content中的空格字符會被渲染為0*0的空白元素，不會占用頁面空間。
content包含一個空格，是為了解決Opera瀏覽器的BUG。當(dāng)HTML中包含contenteditable屬性時，如果content沒有包含空格，會造成清除浮動元素的頂部、底部有一個空白（設(shè)置font-size：0也可以解決這個問題）。
:after偽類的設(shè)置已經(jīng)達(dá)到了清除浮動的目的，但還要設(shè)置:before偽類，原因如下
:before的設(shè)置也觸發(fā)了一個BFC，由于BFC有內(nèi)部布局不受外部影響的特性，因此:before的設(shè)置可以阻止margin-top的合并。
這樣做，其一是為了和其他清除浮動的方式的效果保持一致；其二，是為了與ie6/7下設(shè)置zoom：1后的效果一致（即阻止margin-top合并的效果）。
zoom: 1用于在ie6/7下觸發(fā)haslayout和contain floats
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/116510.html
摘要：導(dǎo)致這一現(xiàn)象的最根本原因在于被設(shè)置了的元素會脫離文檔流。脫離文檔流可以理解為子元素與父元素間的結(jié)構(gòu)被破壞，父子關(guān)系解除。 1.引言 對于我們所有的web前端開發(fā)人員，float是或者曾經(jīng)一度是你最熟悉的陌生人——你離不開它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡單就那么一點知識，但卻駕馭不了它各種奇怪的現(xiàn)象。這就是我們又愛又恨的——float。所以，系統(tǒng)的學(xué)一學(xué)float是非常...
摘要：兩個值都是正值，取最大值，都是負(fù)值，取最小值，一正一負(fù)則相加。使回到正常位置。需要注意的是使用會把放在最前邊。而可以按照，，的順序放置。另外布局也不會出現(xiàn)中間擠掉兩邊的情況。 Question 以下三個div將會會如何放置(margin collapsing)？ body { margin: 0; } .first { margin: 20px; hei...
摘要：或表示紅色，表示綠色，表示藍(lán)色，也可取其他數(shù)值來指定顏色。針對多字節(jié)文字，中文句子也是單詞允許在單詞內(nèi)換行。 一、HTML基礎(chǔ) html常見元素和理解 html常見元素分類 head區(qū)元素：（不會在頁面上留下直接內(nèi)容） meta title style link script base body區(qū)： div/selection/article/aside/header/f...
摘要：或表示紅色，表示綠色，表示藍(lán)色，也可取其他數(shù)值來指定顏色。針對多字節(jié)文字，中文句子也是單詞允許在單詞內(nèi)換行。 一、HTML基礎(chǔ) html常見元素和理解 html常見元素分類 head區(qū)元素：（不會在頁面上留下直接內(nèi)容） meta title style link script base body區(qū)： div/selection/article/aside/header/f...
閱讀 1373·2021-11-15 11:37
閱讀 2321·2021-09-30 09:55
閱讀 4776·2021-09-22 15:51
閱讀 3846·2021-09-22 15:46
閱讀 2837·2019-08-30 15:52
閱讀 553·2019-08-29 16:20
閱讀 2956·2019-08-29 15:12
閱讀 1224·2019-08-26 18:27
