BFC
MDN对BFC的解释:块格式化上下文(Block Formating Context, BFC)是web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
1、开启BFC
flow-root对内容的影响是最低的,但是IE浏览器不支持。
- 根元素
- 浮动元素
- 绝对定位、固定定位的元素
- 行内块元素
- 表格单元格:table、thead、tbody、th、td、tr、caption
- overflow的值不为visible的块元素
- 伸缩元素
- 多列容器
- column-span为all的元素(即使该元素没有包裹在多列容器中)
- display的值,设置为flow-root
2、BFC作用
- 元素开启BFC后,其子元素不会再产生margin塌陷问题;
- 元素开启BFC后,自己不会被其他浮动元素所覆盖;
- 元素开启BFC后,就算其子元素浮动,元素自身高度也不会塌陷。
3、mrgin塌陷的解决
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例</title>
<style>
body {
display: flex;
}
.outer {
width: 500px;
background-color: aqua;
/* 浮动元素 */
/* float: left; */
/* 开启定位元素 */
/* position: relative; */
/* 行内块元素 */
/* display: inline-block; */
/* 表格单元格 */
/* display: table; */
/* overflow不为visible */
/* overflow: hidden; */
/* 多列容器 */
/* column-count: 1; */
/* column-span: all; */
/* display: flow-root; */
}
.inner {
height: 200px;
width: 200px;
margin: 20px;
}
.inner1 {
background-color: yellow;
}
.inner2 {
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
</div>
</body>
</html>