CSS 外边距合并、塌陷和BFC

外边距合并

CSS中的外边距合并指的是当两个相邻元素都设置了上下外边距时，它们之间会发生重叠。这种现象被称为"margin collapsing"（外边距合并）或者"margin collapse"（外边距塌陷）。

可以看出上下两个盒子之间的边距是30px，这是一个常见的CSS现象

CSS中的外边距合并是为了解决一些布局问题而设计的。在早期的HTML布局中，开发者经常遇到元素之间出现意外的空白区域，这通常是由于浏览器默认的外边距行为导致的。为了解决这个问题，CSS引入了外边距合并的概念，允许开发者更好地控制元素之间的间距。

通过允许垂直方向上的外边距合并，开发者可以更方便地控制页面元素之间的间距，特别是当页面中包含多个行内元素或行内块元素时。这种合并行为可以帮助消除不必要的空白区域，使页面布局更加紧凑和一致。

如果确实需要实现上面的效果，给其中一个盒子套一个外壳，给这个外壳设置BFC，因为BFC的规则是盒子内的和盒子外的是不互相影响

  
  
  



  

    margin-bottom: 30px;
  


  margin-top: 20px;

Margin塌陷

我们先正常设置两个盒子，一个父盒子和一个子盒子，给子盒子设置 margin-top，会发现没有撑开，并且会带着父盒子一起动

解决方法:
1、给父元素设置 border、padding
2、父盒子设置 overflow: hidden

  
  
  



  

    margin-bottom: 30px;
  

何为BFC

BFC（Block Formatting Context）是CSS布局模型中的一部分，用于控制元素在页面上如何进行定位、显示以及与其他元素交互等操作。通过创建新的BFC可以改变元素的默认布局行为。

形成BFC的条件

  1、浮动元素，float 除 none 以外的值；
  2、定位元素，position（absolute，fixed）；
  3、display 为以下其中之一的值 inline-block，table-cell，table-caption；
  4、overflow 除了 visible 以外的值（hidden，auto，scroll）；

BFC的特性

  1.内部的Box会在垂直方向上一个接一个的放置。
  2.垂直方向上的距离由margin决定
  3.bfc的区域不会与float的元素区域重叠。
  4.计算bfc的高度时，浮动元素也参与计算
  5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

解决什么问题

1、可以用来解决两栏布局BFC 的区域不会与 float box 重叠
2、解决 margin 塌陷和 margin 合并问题
3、解决浮动元素无法撑起父元素

利用bfc，实现一个左侧固定宽度、右侧自适应的效果