css中的bfc解决什么问题

BFC即“块级格式化上下文”，是CSS中的一个重要概念。在网页布局中，我们经常遇到一些元素会产生特殊的渲染规则，这些规则就是由BFC来控制的。

一个元素产生BFC的条件：
1. 根元素（即html元素）
2. float属性不为none
3. position属性不为static或者relative
4. display属性为table-cell, table-caption, flex, inline-block, grid... 

1.清除浮动

浮动元素会让周围的元素失去高度，导致页面布局错乱。通过给浮动元素所在区域创建BFC，可以让这个区域包含住浮动元素，从而解决布局问题。

<div class="box"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 

.box { 
    overflow: hidden; /* 创建BFC */
} 
.left { 
    float: left; 
    width: 50%; 
    height: 100px; 
    background: red; 
} 
.right { 
    float: right; 
    width: 50%; 
    height: 200px; 
    background: green; 
} 

2.防止margin重叠

相邻元素的margin值会以大的为准，而BFC中同一个元素的相邻margin值不会重叠，这可以避免布局混乱问题。

<div class="box"> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

.box { 
    overflow: hidden; /* 创建BFC */
} 
.child { 
    width: 50%; 
    height: 100px; 
    margin: 20px; 
    background: red; 
} 

3.自适应两栏布局

通过创建两个BFC，一个左侧浮动元素的BFC，一个右侧非浮动元素的BFC，就可以实现两栏自适应布局。

<div class="box"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 

.box { 
    display: flow-root;
} 
.left { 
    float: left; 
    width: 30%; 
    height: 100%; 
    background: red; 
} 
.right { 
    overflow: hidden; 
    margin-left: 30%; 
    height: 100%; 
    background: green; 
} 

BFC是CSS中的一个重要概念，通过它可以解决网页布局中的一些难题，如清除浮动、防止margin重叠、自适应布局等。掌握BFC概念可以帮助我们更好地理解和掌握CSS布局的技巧。