国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何使用BFC清除CSS浮動以及解決margin合并的問題

sf_wangchong / 1416人閱讀

摘要：它是頁面中的一塊渲染區域，并且有一套自己的渲染規則，規定了內部子元素如何定位，以及與其他元素的關系和相互作用。即使浮動也是如此。解決方案，根據規則第六條。防止垂直疊加內部相鄰的元素的會疊加。根據規則第五條，將其中一個設置為即可。

1、CSS 最基本的布局單位

Box 是 CSS 布局的對象和基本單位。
元素的類型和display的屬性決定了Box的類型。

2、BFC

BFC（Box Formatting Context）是一個獨立的渲染區域，規定內部的元素如何布局，并且與外部的元素無關。
Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套自己的渲染規則，規定了內部子元素如何定位，以及與其他元素的關系和相互作用。

3、BFC的布局規則

內部的Box會在垂直方向上一個接著一個放置。
Box垂直方向的距離由 margin 決定。屬于同一個BFC中的兩個相鄰的Box上下margin會發生疊加。
每個元素的margin box 的左邊，與包含塊border box 的左邊相接觸。即使浮動也是如此。
BFC 的區域不會與float box 重疊。
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響外面的元素，反之也如此。
計算BFC的高度時，浮動元素也參與計算。

4、哪些元素會生成BFC？

根元素；
float 屬性不為 none；

position 為 absolute 或 fixed；

display 為 inline-block，table-cell，table-caption，flex，inline-flex；

overflow 不為 visible；　

5、BFC的作用及原理

　　自適應兩欄布局：左邊定寬高，右邊自適應。
　　　　左側浮動，然后左右重疊，根據BFC的規則第三、四條，設置右側的元素為BFC。

　　清除內部浮動：
　　　　一個元素里面，有兩個浮動的元素，父元素的高度默認是不計算浮動元素的高度。
　　　　解決方案，根據BFC規則第六條。

　　防止垂直margin疊加：
　　　　BFC內部相鄰的元素的margin會疊加。
　　　　根據BFC規則第五條，將其中一個設置為BFC即可。

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

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

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

相關文章

  • css浮動、BFC、定位問題

    摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。產生折疊的必備條件必須是鄰接的而根據規范，兩個是鄰接的必須滿足以下條件必須是處于常規文檔流非和絕對定位的塊級盒子并且處于同一個當中。 1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響? 何謂浮動元素？有什么特征？所謂浮動元素，即是設置了浮動屬性的元素。其特征為： 1.浮動的框可以向左或者向右移動，直到它的外...

    Tony 評論0 收藏0

  • margin合并、塌陷，清除浮動

    摘要：合并的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。那我們怎么辦，回到主題清除浮動。你可能忘了偽元素是行內元素，只有塊元素才能清除浮動。所以我們最好后，主動清除一下浮動，避免以后遇到很奇怪的問題。 這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學生，就是想把自己所學到的知識寫出來，加深自己的印象，記錄自己成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知...

    Alliot 評論0 收藏0

  • margin合并、塌陷，清除浮動

    摘要：合并的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。那我們怎么辦，回到主題清除浮動。你可能忘了偽元素是行內元素，只有塊元素才能清除浮動。所以我們最好后，主動清除一下浮動，避免以后遇到很奇怪的問題。 這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學生，就是想把自己所學到的知識寫出來，加深自己的印象，記錄自己成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知...

    MadPecker 評論0 收藏0

  • 理解 BFC (Block Formatting Model)

    摘要：是指塊級元素，就是會強制換行的元素，比如。將元素推向左側。請根據不同的實際情況，選擇最合適的方式。再次重申一下，是為子元素創建定位環境。，由于浮動元素占據了一定的寬度，新創建的會因此而變窄。這里只是為了更好地去理解而做一個例子。 什么是 BFC W3C 為瀏覽器規定了三種定位模型：Normal Flow, 浮動, 和絕對定位。本文所介紹的 BFC (Block Formatting M...

    Tonny 評論0 收藏0

發表評論

0條評論

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