css margin重叠和高度坍塌

方块之间的 margin 出现了重合,并且最后只保留两者之间值最大的 margin

BFC 的含义
BFC 的全称是 Block Formatting Context, 意为块级格式化上下文

BFC 的用处
通过 BFC 来解决 margin 塌陷的问题

margin 塌陷产生的原因
两个或多个块级元素的盒子的垂直外边距会重合, 最终垂直外边距会变成两者中最大的那个.
如果出现负边距, 则在最大的正边距中减去绝对值最大的负边距.
如果没有正边距, 则从零中减去绝对值最大的负边距.

注意: 是垂直外边距会重合, 水平外边距永远不会发生塌陷

触发 BFC 一共有 4 种方式
浮动元素, float 属性设置除 none 以外的值;
定位元素, position 属性设置绝对定位 absolute 或固定定位 fixed;
display 属性设置为其中之一的值 inline-block, table-cell, table-caption;
overflow 属性除 visible 以外的值, 即 hidden，auto，scroll;

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

要注意的细节

凡是设置了 position: absolute 和 float: left/right 后,系统会自动将被设置的元素变为inline-block元素, 即行级块元素

https://blog.csdn.net/leon9dragon/article/details/103857978

https://juejin.cn/post/6844903794321391623

 

什么是高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

怎么解决高度塌陷问题
①将父元素的高度写死。

②开启元素BFC属性。

③可以直接在高度塌陷的父元素的最后，添加一个空白的div

④通过after伪类，选中box1的后边

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是最推荐使用的方式，几乎没有副作用。

.clearfix:after{
    /*添加一个内容*/
    content: "";
    /*转换为一个块元素*/
    display: block;
    /*清除两侧的浮动*/
    clear: both;
}

 

https://blog.csdn.net/Javaxiaobaismc/article/details/88786103