BFC块级格式化上下文

最新推荐文章于 2023-08-04 16:23:59 发布

MelodyFreedom

最新推荐文章于 2023-08-04 16:23:59 发布

阅读量296

点赞数

分类专栏： web前端 BFC

本文链接：https://blog.csdn.net/MelodyFreedom/article/details/106084579

版权

web前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

BFC

1 篇文章 0 订阅

订阅专栏

BFC（block formatting context ）块级格式化上下文，究竟是什么呢？看完就明白了。。

BFC 目的是什么？目的是为了形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局，怎么样才能形成这样一个独立的空间呢，可以通过设置元素的属性，如果我们设置了某个元素的属性，这个元素的属性使得这个元素形成了一个独立的空间，那么就可以说触发了BFC，到这里还没有明白怎么回事，甚至更加不明白说了什么？接下来看个例子：

一：解决父元素坍塌的问题

以下是一个正常的页面，我们看到效果如下图：

但是当我们的.child这个元素是浮动元素的时候，如下图，可以看到页面的布局乱了，黄色父元素塌陷了，导致后面的正常排列的

绿色元素布局乱了，绿色也跟着上去了，要解决这个问题，我们就得想办法让红色包裹黄色形成一个完全独立的空间，不要影响外面的布局，怎么形成这个独立空间呢?

这个时候，我们对红色元素加上overflow:hidden来清除浮动，就让当前黄色块的立体浮动不存在了，所以黄色不浮动了，它又回到了父元素红色框内，这个时候我们的这个红色块就把黄色块给保护起来了，这样依赖，绿色也回到了自己该存在的地方，如下

像这样的，能够形成一个完全独立空间，并让空间中的子元素不影响外面布局的这种方式，我们就叫触发BFC.以上图为例，触发规则一般又以下几种

1 float不为none，可以是left，right

2 position不为relative和statice，可以是absolute和fixed

3 overflow为auto，scroll和hidden，

4 display值为table-cell或者inline-block，flex，table-caption或者inline-flex

其中1，2是让元素脱离了文档流形成了独立的块

3分析如下：而当某个元素的长宽固定时，设置这个元素的overflow中值为auto和scroll可保证这个独立的块不影响外界布局出现滚动条，当值为hidden时，隐藏溢出也不影响外部布局，现在的这个元素的overflow：hidden指的仅仅解决的是自身元素内容溢出触发的BFC，和上面图片中例子不一样，上面图片中的例子中子元素脱离文档流中的父元素并没有设置宽和高，所以这个子元素不存在需要隐藏，在这个情景中，触发BFC是为了为父元素添加overflow:hidden是为了清除父元素中子元素立体上浮的，称为清除浮动，使用的css样式一样，但是代表的情景和功能不一样，前者是为了隐藏溢出，后者是为了清除浮动，但不论哪种情况，这种方式对页面中形成一个独立的空间是有用的，所以它触发了BFC。

第四种暂时不分析，有时间过来补。

触发了BFC的容器就是页面上的一个完全隔离开的容器，容器中的元素绝对不会影响到外满的元素，为了保证这个规则，出发了BFC的父元素在计算高度时候，不得不让浮动的子元素也参与进来，变相的清除掉了内部浮动的目的，但有时候，出于布局的需要也可能无法给父元素设置这些属性，而解决高度塌陷，常用的还有以下的办法。

1，让父元素也浮动起来，这样父元素也脱离了文档流，父元素就可以自适应子元素的高度，缺点是引起脱离文档的其他问题。

2.给父元素加上一个固定高度，这种情况只能给已知子元素高度的情况，缺点是不灵活。

3.在浮动的元素后面添加一个空元素，设置{clear:both}来清除浮动，缺点增加了无意义的标签。

4.为浮动的最后一个元素设置一个伪元素，::after{clear:both};和3实际上是一个意思，缺点是复用不当会导致代码量增加。