说 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 视频教程 https://www.html.cn/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>
本文来自 css3 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/15308.html