关于BFC布局的那些事

时间 2019-11-10

标签关于 bfc 布局那些繁體版

原文原文链接

关于BFC的那些事

一、什么是BFC？

它是Block Formatting Context（块级格式化上下文）的简称。css

二、什么是Block Formatting context?

Formatting context是指页面中的一块渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。
最多见的Formatting cocntext 有Block formatting context（简称BFC）和Inline formatting (简称IFC).浏览器

三、细谈BFC

BFC是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
BFC就是一种布局方式，能够理解为一个做用范围，即在一个BFC里的布局与其以外的布局不相关或者说不相互影响。ide

四、使用BFC的缘由：

使用必定的CSS声明能够生成BFC，浏览器对生成的BFC有一系列的渲染规则，利用这些渲染规则咱们能够达到必定的布局效果，为了达到特定的布局效果咱们让元素生成BFC。布局

五、哪些元素能够生成BFC？

当一个HTML元素知足下面条件的任何一点，均可以生成Block formatting context.flex

根元素
float的值不为none
overflow的值不为visible（能够为hidden，scroll，auto）
display的值为inline-block，table-cell，table-captain，flex，inline-flex中的任何一个
position的值为absolute，fixed(不为static，relative中的任何一个)
display : table也认为能够生成BFC，其实这里主要缘由在于table会默认生成一个匿名的table-cell,正是这个匿名的table-cell生成了BFC。

六、经常使用的用来触发BFC的CSS样式：

overflow : scroll（可能会显示没必要要的滚动条）
overflow : hidden（将会剪掉溢出的元素，不须要给BFC元素设置宽度）
display : flex
float : left（将会把元素置于它的左边，其余元素环绕着它）
display : table-cell(必须给BFC元素设置无限大的宽度)3d

七、BFC的布局规则

内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin 决定（完整的说法是：属于同一个BFC的两个相邻的Box的margin会发生重叠，与方向是无关的）
每一个盒子的左外边框紧挨着包含块的左边框（从右到左的格式，则为紧挨右边框），即便浮动元素也是如此。（这说明BFC中的子元素不会超出他的包含块，也就是他的父级块状元素）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

一、自适应两栏布局

body{
            width:300px;
        }
        .aside{
            width:100px;
            height:150px;
            float:left;
            background:#f66;
        }
        .main{
            height:200px;
            background:#ffc;
            overflow:hidden;
        }

<body>

    <div class="aside"></div>
    <div class="main"></div>

</body>

效果以下：
code

在不加overflow:hidden;以前的效果：
orm

由于根据BFC布局规则第三条可知道：
每一个元素的margin box的左边，与包含块border box的左边相接处（对于从左到右的格式化，不然相反）。虽然存在浮动的元素aside，但main的左边依然会与包含块的左边相接处。blog

在加了overflow : hidden 以后aside就造成了一个BFC，这个新的BFC不会与浮动的aside重叠，main会根据包含块的宽度，和aside的宽度，自动边窄。it

二、清除内部浮动

.parent{
            width:300px;
            border:5px solid #fcc;
        }
        .child{
            width:100px;
            height:100px;
            border:5px solid #f66;
            float:left;
        }

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

结果：

缘由是：计算BFC的高度时，浮动元素也参与计算
改变的方法是：为达到清除内部浮动，咱们能够触发parent生成BFC，那么parent在计算高度时，parent内部的浮动元素child也会参与计算。

.parent{
            width:300px;
            border:5px solid #fcc;
            overflow:hidden;
        }

结果是：

三、放置垂直margin重叠

p{
            color:#f55;
            background:#fcc;
            width:200px;
            line-height:100px;
            text-align:center;
            margin:100px;
        }

<p>Haha</p>
    <p>HeHe</p>

结果以下：

解决办法：

p{
            color:#f55;
            background:#fcc;
            width:200px;
            line-height:100px;
            text-align:center;
            margin:100px;
        }
        .ddd{
            overflow:hidden;
        }

<p>Haha</p>

    <div class="ddd">
       <p>HeHe</p>
    </div>

结果：

缘由就是：BFC布局规则的第二条;
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
现象：两个p之间的距离为100px，发送了margin重叠。
解决方案：咱们能够在p外面包裹一层容器，并触发该容器生成一个BFC，那么两个p便不属于同一个BFC，就不会发生margin重叠。

在这里总结了一下，就是，若是一旦造成BFC，那么这个BFC就是一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。