Css里的BFC

princekin 发布于2019-08-29 16:06 / 1590人阅读

摘要：一简介全称，块级格式化上下文，就是一个块级元素的渲染显示规则可以把理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素二的触发条件只要元素满足下面任一条件即可触发特性根元素浮动元素不为的属性值绝对定位元素为除了以外的值三的布局

一、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里的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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