点击刷新
css中bfc是什么意思？
说BFC之前先说说文档流，文档流分为：浮动流、定位流、普通的标准流，而普通标准流其实就是BFC中的FC。
FC：formatting context的英文缩写，翻译过来就是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及与元素之间的关系和作用。
常见的FC：BFC(块级格式化上下文)、IFC(行级格式上下文)、GFC(网络布局格式上下文)、和FFC(自适应格式上下文)。
● BFC的定义
BFC（Block formatting context ）“块级格式上下文”。 是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。
● 触发BFC的条件
满足下列条件之一就可以触发BFC
1：根元素，即html元素
2：float的值不为none
3：overflow的值不为visible
4：display的值为inline-block、table-cell、table-caption
5：position的值为absolute或者fixed
● BFC是页面独立的一个容器，与外界的毫无关系。
（相关课程推荐：css视频教程）
● BFC的作用
BFC最经典的一个应用就是清除浮动造成的影响
触发父元素的BFC可以解决这个问题。
<style>
.box {
width: 200px;
border: 1px solid #ccc;
overflow：hidden；
}
.son {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>© 著作权归作者所有
举报
发表评论
0/200
