摘要:一塊級格式化上下文什么是塊級格式化上下文,塊級格式化上下文就是一個塊級元素的渲染顯示規則可以把理解為一個封閉的大箱子,,容器里面的子元素不會影響到外面的元素觸發的條件如下根元素的值不為。
一、塊級格式化上下文(BFC) 1、什么是塊級格式化上下文?
Block Formatting Contexts (BFC,塊級格式化上下文)就是一個塊級元素 的渲染顯示規則 (可以把 BFC 理解為一個封閉的大箱子,,容器里面的子元素不會影響到外面的元素)2、觸發BFC的條件如下:
根元素
float的值不為none。
overflow 除了 visible 以外的值(hidden,auto,scroll)
display的值為table-cell, table-caption, inline-block中的任何一個。
絕對定位元素:position (absolute、fixed)
彈性盒 flex boxes (元素的 display: flex 或 inline-flex)
3、BFC 的布局規則:內部的盒子會在垂直方向,一個個地放置;
BFC是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素,反之亦然
屬于同一個BFC的 兩個相鄰Box的 上下margin會發生重疊 ;
計算BFC的高度時,浮動元素也參與計算
每個元素的左邊,與包含的盒子的左邊相接觸,即使存在浮動也是如此;
BFC的區域不會與float重疊;
4、BFC特性代碼如下:
外邊距折疊 上下100margin上下100margin
效果圖:
第一個div的下邊距和第二個div的上邊距發聲了重疊,所以兩個盒子之間距離只有100px,而不是200px。
解決方法:
放在不同的BFC下
代碼如下:
外邊距折疊 上下100margin上下100margin效果圖:
這次我們可以清晰的看清兩個中間是200px;并沒用重疊。
2、BFC可以包含浮動的元素(清除浮動)代碼如下:
高度塌陷 浮動效果圖:
由于容器內元素浮動,脫離了文檔流,所以容器只剩下 2px 的邊距高度。如果使觸發容器的 BFC,那么容器將會包裹著浮動元素。
代碼如下:
3、侵占浮動元素的問題高度塌陷 浮動代碼如下:
高度塌陷 浮動歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看!效果圖:
解決方法:
通過觸發btm2的BFC解決
代碼如下:高度塌陷 浮動歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看! 歡迎大家觀看!效果圖:
持續更新,歡迎大家指教!文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52681.html
相關文章
十分鐘復習CSS盒模型與BFC
摘要:盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中,每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源 旨在系統復習css盒模型與bfc 節省復習時間 閱讀10分鐘 什么是盒模型 每一個文檔中,每...
十分鐘復習CSS盒模型與BFC
摘要:盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中,每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源 旨在系統復習css盒模型與bfc 節省復習時間 閱讀10分鐘 什么是盒模型 每一個文檔中,每...
前端進階之什么是BFC?BFC的原理是什么?如何創建BFC?
摘要:官方說法就是它規定了用戶端在媒介中如何處理文檔樹。是的包含塊,同時又是的包含塊,不是絕對的。因此稱為匿名盒子。行內盒子行內級元素會生成行內級盒子,該盒子同時會參與行內格式化上下文的創建。如果只有一個值指定為,則其使用的值來自相等。 作者:陳大魚頭 github: KRISACHAN 盒模型 The CSS box model describes the rectangular b...
CSS > 譯文:理解CSS中的塊級格式化上下文
摘要:譯文理解中的塊級格式化上下文塊級格式化上下文是網頁視覺渲染的一部分,并用于決定塊盒子的布局。根據所言浮動絕對定位元素為或行內塊元素表格單元格表格標題以及屬性值不為的元素除了該值被傳播到視點的情況將創建一個新的塊級格式化上下文。 CSS > 譯文:理解CSS中的塊級格式化上下文 Original Author: Ritesh Kumar Original Article: http:/...
CSS中重要的BFC
摘要:中有個重要的概念,搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前,先說一下文檔流。我們常說的文檔流其實分為定位流浮動流普通流三種。使用包含浮動元素注意,這里觸發并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個重要的概念BFC,搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡介 在解釋BFC之前,先說一下文檔流。我們常說的文檔流其實分為定位...
發表評論
0條評論
weij
男|高級講師
TA的文章
閱讀更多
《C語言入門》你真的會打印Hello World嗎,花式打印Hello World
閱讀 3201·2021-11-25 09:43
Spring Boot 2.6正式發布,Spring Boot 2.4停止維護
閱讀 3206·2021-11-23 09:51
css 樣式收集
閱讀 3519·2019-08-30 13:08
我們前端是怎么找到工作的
閱讀 1570·2019-08-29 12:48
DataTables表格插件使用說明
閱讀 3594·2019-08-29 12:26
「CSS3 」動畫詳解
閱讀 397·2019-08-28 18:16
ES6—class與模塊化(9)
閱讀 2562·2019-08-26 13:45
關于JS的面向對象的思考和總結
閱讀 2429·2019-08-26 12:15