★ BFC / 浮动
2020-06-08 本文已影响0人
行走的蛋白质
- 概念
- 触发 BFC
- 特性及应用
概念
- BFC
- Block Formatting Contexts 块级格式化上下文
- 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。
触发 BFC
- body 根元素
- 浮动元素：float 属性除 none 以外的值
- 绝对定位元素：position 属性为 absolute 或 fixed
- display 属性值为 inline-block、table-cells、flex 的元素
- overflow 除了 visible 以外的值：hidden、auto、scroll
特性及应用
同一个 BFC 下元素外边距会发生折叠
<head>
div{
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
</head>
<body>
<div></div>
<div></div>
</body>
同一个 BFC 下元素外边距发生重叠
- 原因：因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。
- 如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。
BFC 可以包含浮动的元素 ( 清除浮动 )
<div style="border: 1px solid #000;">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
BFC 可以包含浮动的元素 ( 清除浮动 )
- 由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素。
BFC 可以阻止元素被浮动元素覆盖
<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>
BFC 可以阻止元素被浮动元素覆盖
- 这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden
清除浮动
浮动
- 浮动的元素脱离文档流, 之前占用的空间回释放, 会造成父元素的高度坍塌
清除浮动的方法
- 将父级元素变成 BFC 盒子, 比如父级添加 overflow: hidden；
- 浮动元素后面添加一个块级元素，并添加 clear: both 属性
- 通过给父级元素添加伪类 after，达到清除浮动的目的；
.outer {
background-color: #999;
/*overflow: hidden;*/
}
.inner {
float: left;
background-color: #f9f9f9;
height: 100px;
width: 100px;
}
/*.clear {
clear: both;
}
*/
.outer::after {
display: block;
content: '';
clear: both;
}
</style>
<body>
<div class="outer">
<div class="inner"></div>
<!-- <div class="clear"></div> -->
</div>
</body>
