關于BFC的一些思考

Olivia 發布于2019-08-30 12:50 / 3167人閱讀

摘要：兩個值都是正值，取最大值，都是負值，取最小值，一正一負則相加。使回到正常位置。需要注意的是使用會把放在最前邊。而可以按照，，的順序放置。另外布局也不會出現中間擠掉兩邊的情況。

Question

以下三個div將會會如何放置(margin collapsing)？



    
        
            三個元素的外邊距折疊

同一個BFC中，相鄰的塊狀元素都是垂直放置嗎？

如何清除浮動？根據什么原理？

如何對左側欄200px，主內容自適應進行布局？

如何使用margin完成圣杯布局（左側x px，右側y px，中間自適應），用flex呢？

Answer

以下三個div將會會如何放置？

在同一個BFC中，相鄰的塊狀
元素會發生折疊。兩個margin值都是正值，取最大值，都是負值，取最小值，一正一負則相加。那么如題有三個呢，是從父元素往子元素算起，還是子元素往外算起？如果從外往里算，是0，從內往外算是-10px。經測試，是從內往外計算。

live demo

同一個BFC中，相鄰的塊狀元素都是垂直放置嗎？

不一定，設置writing-mode值。查看以下Demo。

live demo

如何清除浮動？根據什么原理？

緊挨的塊級元素設置clear both來清除浮動，一般會通過:after清除浮動。如Bootstrap的clearfix。

.clearfix {
    display: table;
    content: " ";
    clear: both
}

使父級元素觸發一個新的BFC，如overfow:hidden或者display:table。

live demo

如何對左側欄200px，主內容自適應進行布局？

左欄設置200px的寬，設置浮動，主內容設置overflow:hidden觸發一個BFC。因為BFC不會與浮動折疊，所以右側會自適應。

live demo

如何使用margin完成圣杯布局（左側x px，右側y px，中間自適應），用flex呢？

圣杯布局大致結構如下

步驟如下：

.container設置內邊距，留出放置左右固定寬度側欄的寬度。設置min-width:x px（content-box）下，如果.left寬度大于父元素content-box的寬度，自己會被擠下去。

.main，.left，.right設置浮動，.main設置100%的寬度。.main位置固定。

.left設置x px寬度，設置margin-left為-100%，此時與.main左上角重合，設置position:relative，left設為-x px或者right設置x px，.left位置固定。

.right設置y px寬度，把margin-left設為-y px，此時與.main右上角重合，相對定位回到自己的位置。(或者margin-right小于等于-y px，最后不用定位，查看margin demo2)。

footer設置clear:both清除浮動，或者container設置為display:table或者overflow:hidden閉合浮動。使.footer回到正常位置。

另外有flex布局就簡單多了。需要注意的是使用margin會把.main放在最前邊。而flex可以按照.left，.main，.right的順序放置。另外flex布局也不會出現中間擠掉兩邊的情況。

margin demo1
margin demo2
flex demo

云服務器 GPU云服務器人工智能的思考對人工智能的思考 java的一些代碼深度學習的一些應用

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

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

細說 CSS margin

摘要：給父元素設置了一個灰色背景，并且沒有設置高度，因此高度會隨著內容而擴展，設置為。這個元素的位置如下圖所示因為元素清除了左浮動，所以元素下移。由于這條規則的存在，導致他們折疊后的不能跟的進行折疊，因此的高度被撐開。作者：https://coding.net/u/zhengkenghong原文：https://blog.coding.net/blog/css-margin 本文著重描述關...

tianren124 2019-08-30 12:48 評論0 收藏0
BFC的一些探究

摘要：它是用于決定盒子的布局及浮動相互影響范圍的一個區域。小白反思如果世界的運行都有自我運行的一套機制，那么的世界必然有自己的一套規則。外邊距合并當時在回答外邊距的問題時，總結出了合并的一條規則必須相鄰。最初的夢了解BFC后，能夠更深入的明白外邊距合并原理。了解BFC后，能夠更深入的明白浮動的行為。了解BFC后，知識就是你的，總不會吃虧對吧？哈哈之前有兩篇文章《行內元素的一些探索》、《...

curlyCheng 2019-08-30 12:44 評論0 收藏0
css進階

摘要：柵格系統用于處理頁面多終端適配的問題。它表示抓取對象以后拖放到另一個位置。目前，它是標準的一部分。精簡高效的命名準則方法這篇文章發布于年月日，星期日，，歸類于相關。但是不會受到包含塊的限制，可能會溢出。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不由...

import. 2019-08-29 14:07 評論0 收藏0
前端經典文章

摘要：上周末看這篇文章時，偶有靈光，所以，分享出來給大家一起看看前端面試四月二十家前端面試題分享請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。前端切圖神器 avocode 有了這個神器，切圖再也腰不酸，腿不疼了。這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，...

lowett 2019-08-22 13:58 評論0 收藏0
關于BFC的一些應用

摘要：關于的概念性介紹就不贅述了，網上有很多關于此的介紹，后面也羅列了些個人認為很不錯的文摘。那今天要說的是關于它的一些技巧性應用，通過示范比較常會接觸到的排版布局方面的需求來說明下。對于結構有一點要求，觸發的元素必須位于最后一位。關于Block Formatting Context(BFC)的概念性介紹就不贅述了，網上有很多關于此的介紹，后面也羅列了些個人認為很不錯的文摘。那今天要說的...

Java_oldboy 2019-08-28 18:25 評論0 收藏0