BFC问题

Question

父元素设置overflow:hidden,生成BFC，子元素垂直方向边距重叠。但是即便父元素不设置overflow，不生成BFC，子元素边距任然是重叠的。重置方向重叠不是BFC独有的吧

Answer 1

快乐动起来呀 2018-01-17 21:26:58

同学没有好好听课，你去看看bfc用来解决什么问题的

• 提问者 haohao809 #1

  我已经二刷了，才有疑问的。查了下，还有一种情况创建BFC，根元素也会行成BFC。看了下别人总结的.
  1. 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
  2. 处于同一个BFC中的元素相互影响，可能会发生margin collapse；
  3. 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
  4. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
  5. 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
  6. 浮动盒区域不叠加到BFC上；
  也就是2造成边距重叠，你讲得在子元素外添加父元素行成BFC，不造成重叠，用的是4的独立容器的功能

• 快乐动起来呀 #2

  感觉你已经理解偏了，可以试着这样理解：边距重叠是说两个盒子或多个（相邻或者嵌套）在垂直方向的边界会重叠，这个特性与BFC没啥关系，所有普通的块级盒子都会存在，而BFC的作用就是避免重叠，不知道这样说你能不能理解

• 提问者 haohao809 回复 快乐动起来呀 #3

  这么说可以接受的。但上面总结的第二条BFC布局规则，处于同一个BFC中的元素相互影响，可能会发生margin collapse。应该怎么解释？我就想彻底弄清楚这个东西。谢谢老师！

点开查看后面1条评论