haslaylout 和 bfc解析的理解

2022-09-21 04:00:12 字數 623 閱讀 7328

一、haslaylout 和 bfc 乙個是ie特有屬性,乙個是標準屬性,

二、bfc就是頁面上的乙個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素,反之亦然。frykvse

三、bfc 有3個作用,

1.包含浮動元素,

2.防止編劇重疊,

3.防止被浮動元素覆蓋

四、觸發條件:

float 除了none以外的值

overflow 除了visible 以外的值(hidden,auto,scroll )

display (table-cell,table-caption,inline-block, flex, inline-flex)

position值為(absolute,fixed)

fieldset元素

一定要謹記一點,bfc是獨立的乙個容器,不影響其他布局,也不會受影響,利用其特性,可以解決清除浮動,2欄布局等問題

例:2欄自適應布局

1.利用浮動和負margin 來解決

2. 觸發bfc,不會被浮動元程式設計客棧素覆蓋

本文標題: haslaylout 和 bfc解析的理解

本文位址: /web/xindejiqiao/88435.html

BFC和浮動元素

block format context 如何觸發乙個盒子的bfc 用以下方式 position absolute display inline block float left right overflow hidden right.left加入bfc解決 margin left 100px ma...

BFC和margin塌陷問題

margin塌陷 父子元素之間垂直方向的margin會粘合到一起,取最大的那個值 解決方法 優缺點給父級加乙個 border top 1px solid red 不專業,盡量不用 bfc block format context 塊級格式化上下文 如何觸發乙個盒子的bfc 語法給父級設定絕對定位 p...

談談煩人的hasLayout和BFC

在你的瀏覽器上編寫乙個小demo left right parent left child right child 好了,你會發現黑色的parent並沒有顯示出來。浮動元素的父容器並沒有被撐開,都是因為bfc和haslayout 有一點要說明,ie6 7中是沒有bfc的,而haslayout卻是ie...