BFC 记录
一文了解bfc
BFC定义
bfc(box formatting context) 中文名为块级格式化上下文。在介绍BFC是什么之前，我们先分别介绍一下box formatting context的概念
Box: CSS布局的基本单位
Box 是 CSS 布局的对象和基本单位，只管点来说，就是一个页面是由许许多多个Box 组成的。元素的类型和 display 属性决定了这个Box的类型。不同类型的Box，会参与不同的 Formatting Context (一个决定如何渲染文档的容器) 因此Box内的元素会以不同的方式渲染。
关于盒子的类型:
-
块级盒子 block-level box:display 属性为 block, list-item, table 的元素，会生成block-level box。并且参与 block fomatting context;
-
行内盒子 inline-level box:display 属性为 inline,inline-block,inline-table 的元素，会生成 inline-level box。并且参与inline formatting context;
Formatting context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)
BFC 的定义
BFC 它是一个独立的渲染区域，只有 块级元素 参与它规定的内部布局规则。
布局规则：
- 内部的Box会垂直方向，一个接一个的放置
- Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠
- BFC的区域不会与float box 重叠
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会受到外面的元素的影响，反之也如此
- 计算BFC的高度时，浮动元素也参与计算
生成BFC的条件：
- 根元素
- float 属性不为 none
- position 为absolute 或 fixed
- display 为 inline-block, table-cell, flex, inline-flex
- overflow 不为 visible
BFC的作用和原理
- 实现自适应的两栏式布局
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 100px;
float: left;
background: red;
}
.main {
height: 200px;
overflow: hidden;
background: blue;
}
</style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>
image
- BFC 解决margin 重叠问题
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: #f555;
background: #fcc;
width: 200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
.wrap {
overflow: hidden;
}
</style>
</head>
<body>
<p>Hehe</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
</html>
image
- bfc 解决浮动问题
根据BFC的特点中提到的，BFC计算高度会把浮动元素也计算在内的特点
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.par {
overflow: hidden;
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
image
以上
