BFC IFC GFC FFC

Kira在掘金
238 阅读3分钟

css2.1中只有BFC和IFC css3中才有GFC和FFC

什么是FC

它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC

块级格式化上下文，就是页面上隔离出来的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也如此。

如何产生BFC

  • float的值不是none
  • overflow的值不为visible
  • position的值不为relative 和 static
  • display的值为table-cell table-caption inline-block

使用BFC可以实现 两栏的珊格布局。 左边浮动，右边设置overflow

触发BFC

只要元素满足以下任一条件即可触发BFC特性：

  • body跟元素
  • 浮动元素 float除none以外的值
  • 绝对定位元素 position (absolute fixed)
  • display 为 inline-block table-cell flex
  • overfow 除visible以外的值（hidden auto scroll）
1同一个BFC下外边距会发生折叠

<style>
*{
    margin: 0;
    padding: 0;
}

div {
    width: 100px;
    height: 100px;
    background-color: #42b983;
    margin: 10px;
}
</style>

//因为有body根元素会产生一个块级格式化上下文（BFC）
<body>
    <div>test1</div>
    <div>test2</div>
</body>

margin重叠的结局方法，通过两个BFC把内容隔离开，这样就不会出现重叠的问题。如 给外层加上overflow:hidden就可以产生BFC。

<style>
    *{
        margin: 0;
        padding: 0;
    }

    .container{
        overflow: hidden;
    }

    .container div {
        width: 100px;
        height: 100px;
        background-color: #42b983;
        margin: 10px;
    }
</style>
<body>
<div class="container"><div>test1</div></div>
<div class="container"><div>test2</div></div>
</body>
2 BFC解决高度塌陷

当为子元素设置浮动的时候，子元素就会完全脱离文档流，此时将会导致子元素无法撑开父元素，导致父元素的高度塌陷

<div style="border: 5px solid red">
    <div style="width: 100px ;height: 100px;background-color: #42b983;float: left"></div>
</div>

由于浮动，容器内元素脱离了文档流 所以容器只剩下10px边距对象，如果触发BFC，BFC可以包裹浮动元素。

<div style="border: 5px solid red;overfow:hidden">
    <div style="width: 100px ;height: 100px;background-color: #42b983;float: left"></div>
</div>
3 BFC可以阻止元素被浮动元素覆盖
      <div style="width: 100px ;height: 100px;background-color: #42b983;float: left">浮动元素</div>

    <div style="width: 200px;height: 200px;background-color: orangered"></div>


<div style="width: 100px ;height: 100px;background-color: #42b983;float: left">浮动元素</div>

<div style="width: 200px;height: 200px;background-color: orangered;overflow:hidden"></div>

INC

内联格式化上下文，高度由其包含行内元素中最高的实际高度计算而来，（不受竖直方向的padding/margin影响）。

那么IFC一般有什么用？ 水平居中：当一个块要在环境中水平居中时，设置其为inline-blick则会在外层产生IFC，通过text-align可以使其水平居中。

垂直居中，创建一个IFC，用其中一个元素撑开父元素的高度，设置vertical-align:center则可以在容器中设置为垂直居中。

GFC

网格布局格式化上下文。

FFC

自适应格式化上下文。

avatar
文章
阅读
粉丝