1.BFC:Box Formatting Context
定义:
-
直译为”块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与,
-
它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干
分类:
- BOX盒子,页面的基本构成元素。分为 inline 、 block 和 inline-block三种类型的BOX
- FC: Formatting Context是W3C的规范中的一种概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,会去【计算子元素的大小,以及和其他元素的关系和相互作用】
- Block fomatting context (简称BFC)
- Inline formatting context (简称IFC)
2.应用:清除浮动定位
- 只要我们让父盒子形成BFC的区域,那么它就会清除区域中浮动元素带来的导致的脱离标准流影响。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动元素的破坏性</title>
<style type="text/css">
.father{
overflow: hidden; #清除子元素的浮动
border: 1px solid red;
}
.child{
width: 200px;
height: 200px;
float: left;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="child">儿子</div>
</div>
</body>
</html>
3.那些元素会生成BFC
1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block
5.overflow不为visible