css中bfc是什么意思?


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其它相关文章!

推荐阅读