当前位置: 首页 > Web前端 > HTML

所以这是BFC!!!不要在风格问题上胡思乱想

时间:2023-04-02 14:13:25 HTML

前言看到一道前端面试题,第一个问题是什么是BFC?,一下子勾起了我苦涩的回忆。那是七月份,在去上海找工作的路上。什么咖啡是甜的”,装作很熟练的样子,点了一杯焦糖玛奇朵,在角落里坐下,等着电话响……先说css,“说说什么是BFC?”我被这个问题惊呆了,后来我的表现也不太好,所以那天下午我非常喜欢焦糖玛奇朵。:(BlockFormattingContext)官方解释:块格式化上下文包含创建它的元素内部的所有内容,而不是在创建新的块格式化上下文的后代元素中。译:块级格式化上下文或块级格式化区域,块级格式化区域包含创建它的元素内部的所有内容,但不包含创建新块级格式化区域的子元素内部的所有内容不是很容易理解,例如:

说明当BFC1为BFC区时,这个区域包含box2、box3、box4,它们是BFC1和BFC2的子元素,当BFC2也是一个BFC区域时,他包括box5和box6总结每个BFC区域只包含它的子元素,子元素不包含它的子元素每个BFC区域都是独立隔离的,互不影响一个元素不能同时存在于多个BFC如何生成BFC区?根元素(html),或包含body的元素设置为浮动(float),且值不为none(forleft,right),设置定位(position),static或relative不设置display(forabsolute,fixed)为这些inline-block,flex,grid,table,table-cell,table-caption的值设置为overflow,并且该值不可见(是auto,scroll,hidden)和一个满足以上条件,就构成了BFC区。BFC的特点是什么?属于同一个BFC的两个相邻容器的上边距和下边距可以重叠。在计算BFC高度时,浮动元素也会被计算在内。BFC的区域不会与浮动容器重叠。所有属于BFC的盒子默认都是左对齐的,它们的左边距离可以碰到容器的左边框。最后一个盒子,虽然是浮动的,但还是遵循这个原则。BFC是一个独立的容器,容器内的元素不会影响容器外的元素。根据BFC的特点,我们可以解决什么问题呢?根据特征1>>>解决外边距塌陷当两个框的外边距设置为100时,会发现本应为200px的外边距塌陷了,margin重叠只有100px解决这个问题,把两个盒子放在不同的BFC中就可以了,方法一:我们可以把其中一个元素设置为BFC区域,这里给box1包裹一层div,设置overflow:hidden,让它成为BFC区域,使box1和box2成为两个独立的容器,互不影响方法二:设置display:inline-block为其中一个元素,也可以使其成为BFC区域2。根据特征2>>>解决问题父元素高度塌陷的解决这个问题,将父元素设置为BFC区域,然后根据特性3>>>>解决浮动重叠问题。Left设置为浮动,导致.right与重叠它。解决浮动重叠,实现自适应两列效果,让.right成为BFC区域。注:对你的问题做一些补充,使用BFC解决父子级合并外边距的方法有很多种,也会带来相应的效果。例如:inline-block会导致元素的形态发生变化,可能会出现缩水、空隙等情况,设置float会导致元素浮动。绝对定位会导致脱离文档流(注意只有absolute和fixed有效,relative不会有效果)。影响相对较小的方法是overflow:hidden和overflow:auto,但是在相应的场景下也会有影响。例如,当你需要一个下拉菜单时,你不应该设置overflow:hidden。针对不同的应用场景,需要具体问题具体分析,选择最合适的方法来解决写了这么多年的css。知道collapse的高度需要overflow:hidden,清除floating需要overflow:hidden,外边距overlap的高度不够,多加margin,遇到相关样式问题的时候,打开控制台试试各个属性。原来这是BFC,GET来了。