面试积累——BFC

来源：互联网发布：淘宝产品参数怎么设置编辑：程序博客网时间：2024/06/08 07:19

什么是BFC

BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC，它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。

BFC有一下特性：

内部的Box会在垂直方向，从顶部开始一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动元素也参与计算。

如何触发BFC

那么我们该怎么使用BFC呢，如何触发BFC呢？：

float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed）
fieldset元素
绝对定位元素(position:absolute 或fixed)
行内块inline-block(元素的display:inline-block)
表格单元格(元素的display:table-ceil,HTML表格默认属性)
弹性盒flex boxes(元素地display:flex或inline-flex)

在以上的情况里可以创建BFC。

哪些场景可以使用BFC

1.解决margin叠加问题

<head>    <title></title>    <style type="text/css">        p{            margin: 50px;        }    </style></head><body>    <p>hello world</p>    <p>hello world</p>    <p>hello world</p></body>

这里写图片描述
三P每个p之间的距离为50px，发生了外边距叠加。要解决这个叠加问题即让每个P之间是100px，我们可以新建一个BFC，怎么建呢？可以给p元素添加一个父元素，让它触发BFC。如下:

    <style type="text/css">    p {        margin: 50px;    }    .bfc{        /*position: absolute;*/        overflow: auto;    }    </style></head><body>    <div class="bfc">        <p>hello world</p>    </div>    <p>hello world</p>    <p>hello world</p></body>

第一个盒子就和第二个盒子的边距为100px

这里写图片描述

不过虽然变成bfc，但是不同的方式也有所不同

.bfc{        position: absolute;}

这里写图片描述

2.用于布局

    <style type="text/css">        body{            width: 300px;            position: relative;        }        .aside{            width: 100px;            height: 150px;            float:left;            background: blue;        }        .main{            height: 200px;            background: #f00;        }    </style></head><body><div class="aside"></div><div class="main"></div>

这里就会出现这种情况
这里写图片描述
从图中我们会发现上面BFC的第三个特性，就是元素的左外边距会触碰到包含块容器的做外边框，就算存在浮动也会如此。（这里不太理解）
看上面BFC第四个特性，就是BFC不会与浮动盒子叠加，那么我们是不是可以创建一个新的BFC来解决这个问题呢？来看看：

 .main {        height: 200px;                background: #f00;                overflow:hidden;}

就解决了上面的问题。发现我们用overflow:hidden触发main元素的BFC之后，效果立马出现了,

3.用于清除浮动，计算BFC高度.

因为上面第六个特性提到计算BFC高度时，浮动元素也会参与计算，我们先看一个例子：

<head>    <title></title>    <style type="text/css">        .bfc{            border: 5px solid #f00;            width: 300px;        }        .box{            border: 5px solid blue;            width: 100px;            height: 100px;            float: left;        }    </style></head><body><div class="bfc">    <div class="box"></div>    <div class="box"></div> </div></body></html>

其实我一看这个代码，我就知道会出现bfc撑不起来的问题，因为box设置了float，其实就相当于脱离了流，如果理解正常情况下一个html其实就是一层平地，我们往这里面塞盒子。
先把float注释掉来看效果：

/*float: left;*/

bfc没有设置高度，它的高度是因装的东西而定的，如果就是浏览器默认的static，那么box和bfc在一个平面，就相当于我们往地上扔了一个纸箱子，这个箱子的高度是可以伸缩的。我们再往里面扔两个盒子，这个箱子就扩充起来了。
这里写图片描述

float: left;

一旦有了这句话就不一样了，这个时候两个盒子被放在了二楼，这个bfc箱子还在一楼，自然就是瘪的了
这里写图片描述
要如何将这个bfc也放到二楼呢？
那就需要将它变为bfc:就是上面提到的方式

overflow: hidden;float: left;position: absolute;display: flex;

都可以实现，因为这样它就变成了BFC和box并列了，都放到二楼去了。

0 0