什么是BFC以及应用！

￡神魔★判官ぃ 2023-06-24 06:24 144阅读 0赞

## 什么是BFC以及应用 ##

BFC(Block formatting context)直译为“块级格式化上下文”。它是一个**独立的渲染区域**，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与**这个区域外部毫不相干**。

##### **BFC的布局规则** #####

一、内部的Box会在垂直方向，一个接一个地放置。  
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠  
三、每个元素的margin box的左边， 与包含块border box的左边相接触四、BFC的区域不会与float box重叠。  
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。  
六、计算BFC的高度时，浮动元素也参与计算哪些元素或属性  
能触发BFC根元素(html)float属性不为noneposition为absolute或fixeddisplay为inline-block, table-cell, table-caption, flex, inline-flexoverflow不为visible。

*  在设置了overflow: hidden;触发bfc的元素，会剪切掉该元素之外的内容，所以在该元素设置定位后一点超出该元素的范围，则不会显示但是会占用空间，所以在需要定位的元素尽量不要使用这种方式清除浮动或者触发bfc。

##### **BFC的应用** #####

1、自适应两栏布局  
2、清除内部浮动  
3、防止margin上下重叠

*  在两个盒模型浮动后，会脱离文本流可以利用这一特性进行操作给同级元素加另一个bfc一般添加overflow:hidden; 因为bfc规定两个独立的bfc不会重叠，
 *  在全屏的布局中需要将html,body高度设置为100%。

#### 双翼布局 ####

`*{
                margin:0;
                padding:0;
            }
            body,html{
                height:100%;
            }
            .left-box,.right-box{
                width:200px;
                height:80%;
                background:rosybrown;
            }
            .center-box{
                height:100%;
                background:pink;
                overflow:hidden
            }
            .left-box{
                float:left;
            }
            .right-box{
                float:right;
            }

原理：左右浮动会脱离文本流，.center-box触发bfc后形成独立区域，overflow:hidden会剪切掉之外的内容

#### 用 padding实现双翼布局 ####

` *{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
        }
        .left-box,.right-box{
            width:200px;
            height:80%;
            background:rosybrown;
        }
        .center-box{
            height:100%;
            background:pink;
            padding:0 200px;
        }
    
        .left-box{
            float:left;
        }
        .right-box{
            float:right;
        }
    
    
        .con{
            height:100%;
            background:#ccc;
        }
    </style>`

原理：左右两个左右浮动中间部分用padding，控制左右=內边距左右的距离实现。

#### bfc解决margin:上下重叠问题 ####

div{
            width:200px;
            height:200px;
        }
        .box1{
            background:orange;
            margin-bottom:100px;
        }
        .box2{
            background:purple;
            margin-top:50px;
        }
        .box{
            overflow:hidden;
        }

原理：运用了bfc独立渲染区域独立的特点，使得分为bfc区域

#### bfc实现两栏布局 ####

*{
                margin:0;
                padding:0;
            }
            body,html{
                height:100%;
            }
            .left_box{
                width:200px;
                height:100%;
                background:orange;
                float:left;
            }
    
            .right_box{
                height:100%;
                background:pink;
                overflow:hidden;
            }
    
        <div class="left_box"></div>
        <div class="right_box"></div>

原理；左边浮动，右边设置个overflow:hidden;，因为这个属性触发了bfc使得右边的元素内容成为以一个独立的区域

### bug表单对不齐现象处理 ###

input{
    			border: 0;
    		}
    		.tit{
    			width: 200px;
    			height: 40px;
    			line-height: 40px;
    			float: left;
    			border: 1px solid saddlebrown;
    			
    		}
    		.tj{
    			width: 40px;
    			height: 40px;
    			line-height: 40px;
    			float: left;
    			border: 1px solid firebrick;
    		}
    		.tj1{
    			
    			width: 40px;
    			height: 40px;
    			line-height: 40px;
    			float: left;
    		}
    		.box{
    			width: 300px;
    			height: 300px;
    			background: sandybrown;
    			opacity:.5;
    		}
    		.box1{
    			width: 200px;
    			height: 100px;
    			background: seagreen;
    			opacity:.5;
    		}

需要给每个元素添加一个浮动，2去掉原有的边框3在按钮的外面套个元素进行操作外边框，设置按钮高度，属性在span元素中设置，