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>
本文来自css3答疑栏目,欢迎学习!
以上就是css中bfc是什么意思?的详细内容,更多请关注易知道|edz.cc其它相关文章!