BFC模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC</title>
<style>
/* *{margin: auto;padding: auto;} */
.div1{
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
.div2{
/* border: 1px solid black; */
overflow: hidden;/*触发BFC*/
}
</style>
</head>
<body>
<h1>块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。</h1>
<!--
常用创建BFC方法
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
-->
<h2>1.利用BFC避免margin重叠。(user agent stylesheet浏览器默认样式)</h2>
<h3>出现margin重叠问题</h3>
<div class="div1"></div>
<div class="div1"></div>
<h3>BFC解决</h3>
<div class="div2">
<div class="div1"></div>
</div>
<div class="div2">
<div class="div1"></div>
</div>
<h2>2. BFC 可以包含浮动的元素（清除浮动）</h2>
<h3>浮动的元素会脱离普通文档流</h3>
<div class="div2">
<div style="border: 1px solid #000;">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
</div>
<h3>BFC解决</h3>
<p>由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素。</p>
<div style="border: 1px solid #000;overflow: hidden">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
<h2>3. BFC 可以阻止元素被浮动元素覆盖</h2>
<h3>先来看一个文字环绕效果：</h3>
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee;">我是一个没有设置浮动, 也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>
<h3>BFC解决</h3>
<p>这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden，就会变成：</p>
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee;overflow: hidden">我是一个没有设置浮动, 也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>
</body>
</html>
例图：
浙公网安备 33010602011771号