国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 對BFC的理解,如何創建BFC

對BFC的理解,如何創建BFC

來源:千鋒教育
發布人:wjy
時間: 2022-09-06 17:34:00 1662456840

先來看兩個相關的概念:

Box:Box 是 CSS 布局的對象和基本單位,?個??是由很多個 Box 組成的,這個Box就是我們所說的盒模型。

Formatting context:塊級上下?格式化,它是??中的?塊渲染區域,并且有?套渲染規則,它決定了其?元素將如何定位,以及和其他元素的關系和相互作?。

塊格式化上下文(Block Formatting Context,BFC)是Web頁面的可視化CSS渲染的一部分,是布局過程中生成塊級盒子的區域,也是浮動元素與其他元素的交互限定區域。

對BFC的理解,如何創建BFC

通俗來講:BFC是一個獨立的布局環境,可以理解為一個容器,在這個容器中按照一定規則進行物品擺放,并且不會影響其它環境中的物品。如果一個元素符合觸發BFC的條件,則BFC中的元素布局不受外部影響。

創建BFC的條件:

根元素:body;元素設置浮動:float 除 none 以外的值;元素設置絕對定位:position (absolute、fixed);display 值為:inline-block、table-cell、table-caption、flex等;overflow 值為:hidden、auto、scroll;

 

BFC的特點:

垂直方向上,自上而下排列,和文檔流的排列方式一致。在BFC中上下相鄰的兩個容器的margin會重疊計算BFC的高度時,需要計算浮動元素的高度BFC區域不會與浮動的容器發生重疊BFC是獨立的容器,容器內部元素不會影響外部元素每個元素的左margin值和容器的左border相接觸

 

BFC的作用:

解決margin的重疊問題:由于BFC是一個獨立的區域,內部的元素和外部的元素互不影響,將兩個元素變為兩個BFC,就解決了margin重疊的問題。

解決高度塌陷的問題:在對子元素設置浮動后,父元素會發生高度塌陷,也就是父元素的高度變為0。解決這個問題,只需要把父元素變成一個BFC。常用的辦法是給父元素設置overflow:hidden。

創建自適應兩欄布局:可以用來創建自適應兩欄布局:左邊的寬度固定,右邊的寬度自適應。

左側設置float:left,右側設置overflow: hidden。這樣右邊就觸發了BFC,BFC的區域不會與浮動元素發生重疊,所以兩側就不會發生重疊,實現了自適應兩欄布局。

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT