BFC理解与运用

BFC

布局方案：
常见的布局方案：正常文档流、浮动、绝对定位。

概念：
Block Formatting Contexts (块级格式化上下文)（属于普通文档流布局）。
BFC其实就是一个大盒子，里面的元素不会外部元素的布局，比如：被bfc包裹的元素会自动清除浮动等等。

使用：
只要元素满足下面任一条件即可触发 BFC 特性：
1、body 根元素
2、浮动元素：float 除 none 以外的值
3、绝对定位元素：position (absolute、fixed)
4、display 为 inline-block、table-cells、flex
5、overflow 除了 visible 以外的值 (hidden、auto、scroll)

例子：
1、阻止内部元素被外部元素影响

<div style="width: 250px;">
    <div style="float:left;height:100px;width:100px;background:#f1f1f1;"></div>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
</div>

效果：

此时想要实现左右布局则需要：

<div style="width: 250px;">
    <div style="float:left;height:100px;width:100px;background:#f1f1f1;"></div>
    <p style="overflow:hidden">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
</div>

效果：

2、包裹浮动元素/清除浮动

<div style="border:solid 2px #000;">
    <div style="float:left;height:100px;width:100px;background:#f1f1f1;"></div>
</div>

修改：

<div style="border:solid 2px #000;overflow:hidden">
    <div style="float:left;height:100px;width:100px;background:#f1f1f1;"></div>
</div>

3、改变margin

<div style="height: 500px;">
    <div style="margin:50px;height:100px;width:100px;background:#f1f1f1;"></div>
    <div style="margin:50px;height:100px;width:100px;background:#f1f1f1;"></div>
</div>

如图所示，中间的间隔仅有50px，这属于css的一直规范特性，会有外边距重叠。现在需求是要间隔100px.

<div style="height: 500px;">
	<div style="overflow:hidden;">
		<div style="margin:50px;height:100px;width:100px;background:#f1f1f1;"></div>
	</div>
    <div style="overflow:hidden;">
		<div style="margin:50px;height:100px;width:100px;background:#f1f1f1;"></div>
	</div>
</div>