BFC遇到问题,求大佬解释一下

2021-07-30 08:39发布

如何理解BFC中的“每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此”

如何理解BFC中的“每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此”

4条回答
苏楠 - 世界的没好好与你环环相扣
1楼 · 2021-08-02 09:23.采纳回答

 

  布局规则第3条:每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

  因此,即使存在浮动的aside,main的左边依然会与包含块的左边相接触。

  布局规则第4条:BFC的区域不会与float box重叠。

  我们可以通过通过触发main生成BFC, 来实现自适应两栏布局。  

  


九不久
2楼 · 2021-08-03 14:01

每个标签的左外边距与包含块的左边界相接触(从左向右),即使浮动标签也是如此(从左向右格式化时,反之亦然)这句话简而言之就是说盒子跟盒子之间是紧紧挨着的。image.png

WechatIMG42.jpeg 

你的问题有点问题,其实是子元素的margin-left和父元素的内容的左边是挨着的,子元素碰不到父元素的左侧margin、border、padding,她是从父元素的内容开始出现。如果浮动了,那么浮动的第一个子元素的左侧margin也是和父元素的左侧内容挨着的。

我的网名不再改
4楼 · 2021-08-25 12:43

什么是BFC?

BFC是一个概念,可能有开发经验的人遇到过场景,但是没怎么理解。

概念:是个块级格式化上下文,他是指一个独立的块级渲染区域,只有块级盒子(Block-level BOX)的参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。


现象

一个div盒子不设置height,当内容子元素都浮动时,div盒子无法被撑起。也就是说height一直为0;

这个盒子没有形成BFC;


如何创建BFC?

float的值不是none;

position的值不是static或者relative

display的值是inline-block flex 或者inline-flex

overflow:hidden(最佳)

BFC的其他作用

可以取消盒子margin的塌陷

这里举个例子:

    //布局

   

       

   

   //css

    .father{

        width: 200px;

        height:200px;

        background-color: #0a63ab;

    }

    .child{

        width: 100px;

        height:100px;

        margin-top: 20px;

        background-color: #00d1b2;

    }


上方的代码是给子元素child加个margin,但是由于father没有形成BFC,导致的问题是margin塌陷了,在father身上生效了:截图看看



BFC可以阻止元素被浮动元素覆盖住

这个问题实际几乎用不到,知道有这个概念就行了

总结

上方就是对BFC的简单理解,为啥要说呢,场景谁都遇到过,就是用语言怎么去描述要有个概念,面试管经常会问到~