BFC

曦暮流年2022-08-012022-08-01

前言

什么是BFC

BFC Block Formatting Context 块级格式化上下文

简解：当元素开启 BFC 它自己就已经成为了一个独立的空间也就是说这个元素开辟了一个独立的空间然后这个元素的外部元素就不会受到这个元素和这个元素内部元素的一个布局影响

一共三个例子

三个例子也是这个BFC它最主要要解决的三个问题

float

假设有一个 div 然后这个 div 里面包含了两个子 div

外面这个 div 它没有一个具体宽高,它的宽高完全是靠着两个子 div 的大小撑起来的

如果说里面的两个 div 做了一个浮动(众所周知,一旦浮动的话就会脱离文档流)这样的话父元素的高度势必会坍塌(因为没有给他设置一个具体的高度)

如果在这个坍塌的父元素的后面还有一个 div 因为第一个 div 的高度已经坍塌了就势必会造成第二个 div 的布局乱掉

怎么解决呢

因为是它的子元素浮动而造成的父元素高度坍塌所造成的影响

所以可以给这个父级 div 开启一个BFC让它形成一个独立的空间,这样的话哪怕里面的元素再怎么浮动都不会影响到外面的元素的一个布局情况

外边距10px

高:100px
宽:100px

外边距10px

第一个方块的下外边距和第二个方块的上外边距都是10px加起来就是20px的外边距，但是上图的外边距明显不是，这就是外边距重叠了，一共只有10px的外边距

怎么解决呢

开启一个BFC它们外边距就不会再重叠起来了

因为开启了BFC所以它们的空间都独立了所以它们相互之间就不会有任何干扰哪怕是外边距

导航

可以根据屏幕大小
自适应的内容

左边做一个导航,右边是一个可以根据屏幕大小而自适应的一些内容

让内容自适应屏幕的一个宽度,给导航栏 div 做了一个浮动它会重叠在内容 div 的上面如下所示

导航

可以根据屏幕大小
自适应的内容

但是如果内容变多了,那么它的内容会跑到导航栏的下面如下所示这种效果就很有可能不是我们希望看到的

导航

可以根据屏幕大小
自适应的内容
我是多出来的

这样就可以给那个做内容的开启一个BFC这样它俩就不会再有干扰了如本例第一幅图

因为它还是块级元素还是尽可能的把这一行占满的所以还是可以做一个自适应

根元素(< html >)
浮动元素(元素的float不是none)
绝对定位元素(元素的position为absolute或fixe)
display为 inline-block、 table、 table-cell、 table-caption、 table-row、 table-row-group、 table-header-group、 table-column-group、 inline-table、 flow-root、 flex或 inline-flex、 grid或 inline-grid
overflow值不为visible的块元素
contain值为layout、content或paint的元素
多列容器(元素的column-count或column-width不为auto,包括column-count为 1)

/* 日常开发中应用的最多触发BFC的方法 */

overflow: hidden;

display: block;

display: table-cell;

position: absolute;

position: fixed;

虽然方法都可以触发BFC但是表达出来的效果是不一样的

比如**position: absolute;和position: fixed;**一个是固定定位一个是绝对定位最终表现得形式是不一样的