Css里的BFC

princekin 發布于2019-08-29 16:06 / 1627人閱讀

摘要：一簡介全稱，塊級格式化上下文，就是一個塊級元素的渲染顯示規則可以把理解為一個封閉的大箱子，，容器里面的子元素不會影響到外面的元素二的觸發條件只要元素滿足下面任一條件即可觸發特性根元素浮動元素不為的屬性值絕對定位元素為除了以外的值三的布局

一、BFC簡介

BFC全稱：Block Formatting Contexts (BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規則

  （可以把 BFC 理解為一個封閉的大箱子，，容器里面的子元素不會影響到外面的元素）

二、BFC的觸發條件（只要元素滿足下面任一條件即可觸發 BFC 特性）

body 根元素；

浮動元素：float 不為none的屬性值；

絕對定位元素：position (absolute、fixed)；

display為： inline-block、table-cell、flex；

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

三、BFC的布局規則

<1> 內部的盒子會在垂直方向，一個個地放置；
<2> BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然
<3> 屬于同一個BFC的兩個相鄰Box的上下margin會發生重疊；
<4> 計算BFC的高度時，浮動元素也參與計算
<5> 每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此；
<6> BFC的區域不會與float重疊；

四、BFC的應用

<1>解決margin重疊問題
<2>解決浮動高度塌陷問題
<3>解決侵占浮動元素的問題

五、解決方法（代碼和效果圖）

<1>解決margin重疊問題
代碼如下：



    
        
        解決margin重疊
        
    
    
        
        
            
        
        
    

body{
    margin:0 auto;
}
.box{
    overflow:hidden;
}
.one{
    height:50px;
    background-color:red;
    margin:20px 0;
}
.two{
    height:50px;
    background-color:red;
    margin:20px 0;
}
.three{
    height:50px;
    background-color:red;
    margin:20px 0;
}

效果圖如下：

（若將box中的overflow:hiffffden;去掉的話第二個div的margin就會和上下倆個div的margin重疊）
<2>解決浮動高度塌陷問題
代碼如下：



    
        
        解決父元素高度塌陷
        
    
    
        
            
            
        
    

body{
    margin:0 auto;
}
.box{
    overflow:hidden;
    width:500px;
    background-color:yellow;
    margin:0 auto;
}
.one{
    height:50px;
    width:100px;
    background-color:red;
    float:left;
}
.two{
    height:100px;
    width:200px;
    background-color:blue;
    float:right;
}

效果圖如下：
圖片描述

（不給父元素overflow:hiffffden;的話由于父元素沒高而子元素也由于浮動不能撐起父元素，父元素就會塌陷）
<3>解決侵占浮動元素的問題
代碼如下：



    
        
        解決侵占浮動元素的問題
        
    
    
        
            
            
                akehfakwehfaie

                akehfakwehfaie

                akehfakwehfaie

                akehfakwehfaie

                akehfakwehfaie

                akehfakwehfaie

            
        
    

body{
    margin:0 auto;
}
.box{
    overflow:hidden;
    width:700px;
    background-color:yellow;
    margin:0 auto;
}
.one{
    height:100px;
    width:150px;
    background-color:red;
    float:left;
}
.two{
    height:170px;
    background-color:blue;
    /* float:left; */
    overflow:hidden;
}

（這里是將紅色div左浮給藍色的divoverflow：hidden；藍色的就不會被紅色的擋住

注意要給父元素divoverflow：hidden；否則當藍色框內容少時父元素會和藍色div一起變化）

GPU云服務器云服務器 java里的.css bfc bfc布局 python里的

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

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

css里的BFC用法

摘要：里的用法，可以把理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素。規則內部的盒子會在垂直方向，一個個地放置。 css里的BFC用法 BFC(Block Formatting Contexts)，可以把BFC理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素。規則 1.內部的盒子會在垂直方向，一個個地放置。 2.BFC是頁面上的一個隔離的獨立容器，容器里面的子元素...

stefanieliang 2019-08-30 10:51 評論0 收藏0
CSS里的BFC和IFC的用法

摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時，子元素會換到下一行顯示，并且會產生新的行框。一、BFC Block Formatting Contexts (BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規則。（可以把 BFC 理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素）。 1、BFC的布局規則例如以下： ①.內...

ityouknow 2019-08-02 16:17 評論0 收藏0
CSS里的BFC和IFC的用法

摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時，子元素會換到下一行顯示，并且會產生新的行框。一、BFC Block Formatting Contexts (BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規則。（可以把 BFC 理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素）。 1、BFC的布局規則例如以下： ①.內...

BaronZhang 2019-08-30 10:51 評論0 收藏0