CSS总结之BFC
- BFC是什么？
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
2.BFC的表现行为
a. 内部box垂直排列。
b. box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠
c. 每个元素的左外边缘（margin-left)， 与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
d. BFC的区域不会与float box重叠。
e. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
f. 计算BFC的高度时，浮动元素也参与计算
3.BFC怎么形成？
a. 根元素(html)
b. 浮动 (元素的 float 不是 none)
c. 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
d. 非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex
e. 块级元素具有overflow ，且值不是 visible
4.BFC能解决什么问题
a. 清除浮动
b. 防止外边距重叠
c. 防止外边距溢出
d. 自适应两列布局，如下：
<style>
* {
margin: 0;
padding: 0;
}
.left {
float: left;
background-color: green;
width: 200px;
height: 200px;
}
.right {
overflow: hidden;
height: 200px;
background-color: hotpink;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
