Bootstrap清除浮動的實現原理

劉德剛發布于2019-08-30 15:52 / 2771人閱讀

摘要：當中包含屬性時，如果沒有包含空格，會造成清除浮動元素的頂部底部有一個空白設置也可以解決這個問題。這樣做，其一是為了和其他清除浮動的方式的效果保持一致其二，是為了與下設置后的效果一致即阻止合并的效果。

Boostrap清除浮動的css如下：

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

.clearfix:after {
    clear: both;
}

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

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

display:table會創建一個匿名的table-cell，從而觸發塊級上下文（BFC），因為容器內float的元素也是BFC，由于BFC有不能互相重疊的特性，并且設置了clear: both，:after插入的元素會被擠到容器底部，從而將容器撐高。并且設置display:table后，content中的空格字符會被渲染為0*0的空白元素，不會占用頁面空間。

content包含一個空格，是為了解決Opera瀏覽器的BUG。當HTML中包含contenteditable屬性時，如果content沒有包含空格，會造成清除浮動元素的頂部、底部有一個空白（設置font-size：0也可以解決這個問題）。

:after偽類的設置已經達到了清除浮動的目的，但還要設置:before偽類，原因如下

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

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

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

GPU云服務器云服務器清除浮動 volatile的實現原理回調的原理、實現與應用 bootstrap實現導航

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116510.html

重拾css(9)——float

摘要：導致這一現象的最根本原因在于被設置了的元素會脫離文檔流。脫離文檔流可以理解為子元素與父元素間的結構被破壞，父子關系解除。 1.引言對于我們所有的web前端開發人員，float是或者曾經一度是你最熟悉的陌生人——你離不開它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡單就那么一點知識，但卻駕馭不了它各種奇怪的現象。這就是我們又愛又恨的——float。所以，系統的學一學float是非常...

CollinPeng 2019-08-29 12:44 評論0 收藏0
關于BFC的一些思考

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

Olivia 2019-08-30 12:50 評論0 收藏0
前端面試之路一(HTML+CSS面試整理)

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

hqman 2019-08-02 12:09 評論0 收藏0
前端面試之路一(HTML+CSS面試整理)

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

YacaToy 2019-08-29 17:26 評論0 收藏0
CSS

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

Lyux 2019-08-29 16:16 評論0 收藏0