haslaylout和bfc解析的理解

字號:


    一、haslaylout和bfc一個是ie特有屬性,一個是標準屬性
    二、bfc就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素,反之亦然。
    三、bfc有3個作用
    1.包含浮動元素
    2.防止編劇重疊
    3.防止被浮動元素覆蓋
    四、觸發(fā)條件:
    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.觸發(fā)bfc,不會被浮動元素覆蓋