关于BFC的相关知识及两栏页面布局
作者：互联网
1、BFC是块级格式化上下文元素
作用：是对之前遇到的现象的解释
1.在htm1中为啥元素在垂直方向上排布以及为啥有的元素在水平方向上排布
解释：htm1本身就是-一个BFC, [自身变成了一个新的BFC]
2.margin重叠的解决方案
解释：overflow:hidden触发 了一个 新的BFC
3.float排布问题
解释：float box区域不会与出发BFC的区域融合
常用来：[自适应两栏的布局/双飞翼布局[htm1中结构的顺序]]
4.解决高度塌陷方法的解释
解释：BFC会把浮动的高度也计算在内
5.对于父元素与子元素为啥贴着
解释：BFC中:子元素的margin始终与父元素的boder紧挨着
6.BFC之间互不影响
2、触发BFC的条件
1. html
2.脱离标准文档流的也可以float值 不为none position的 值为fixed/absolute
3. overflow的值不为默认
4. display: inline-block/table-caption/table-ce1l/flex/inline-flex
两栏页面布局css代码：
<style>
*{
padding: 0px;
margin: 0px;
}
body,html{
height: 100%;
}
.left{
width: 200px;
height: 100%;
float: left;
background-color: greenyellow;
}
.right{
height: 100%;
background-color: hotpink;
overflow: hidden;
}
两栏页面布局HTML代码：
<body>
<div class="left"></div>
<div class="right"></div>
</body>
标签：BFC,两栏,元素,解释,100%,float,页面 来源： https://blog.csdn.net/zn_yy/article/details/120727154