CSS高度塌陷、BFC及after解决方法、垂直外边距重叠以及clearfix解决方法

CSS高度塌陷

1.高度塌陷问题的描述：
一般发生在父元素和子元素之间， 父元素的宽度默认是100%继承的，高度被子元素撑开， 如果子元素设置浮动，脱离文档流，父元素就会没有高度（父元素本身在文档流中），就会影响文档流中其他元素的布局，必须要进行处理。

术语叫做闭合浮动清除（由于浮动具有“破坏性”——被设置为浮动的元素会被移出正常流（normal flow），这就会使得包含浮动元素的容器表现为高度“塌陷”）
2.解决方法
2.1：使父容器创建BFC
BFC(Block Formatting Context) 块级格式化环境
- BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC, 开启BFC该元素会变成一个独立的布局区域
- 元素开启BFC后的特点：
1.开启BFC的元素(文档流中的元素)不会被浮动元素所覆盖


2.开启BFC防止外边距重叠（父子元素后者是兄弟元素），补充一点，同一个 BFC 下外边距会发生折叠，所以我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。


3.开启BFC的元素可以包含浮动的子元素


怎么开启BFC?
可以通过一些特殊方式来开启元素的BFC：
1、设置元素的浮动（不推荐）,但浮动后的元素的高度和宽度会被内容所撑开。
2、将元素设置为行内块元素（不推荐），元素的高度和宽度会被内容所撑开。
3、将元素的overflow设置为一个非visible的值
- 常用的方式 为元素设置 overflow:hidden 或者auto，scroll影响美观，产生滚动条，开启其BFC 以使其可以包含浮动元素
2.2.在父容器内部的末尾添加额外的元素，通过对其添加clear: both以清除浮动的影响。
原理是在父元素里面设置两个块元素，当块元素1因浮动脱离文档流时，块元素2还在文档流中，撑起了父元素的高度，此时使用clear属性清除块元素1的浮动对块元素2的影响，原理相当于设置了块元素2的上外边距，因此撑起父元素高度的是整个块元素1和2，再将块元素2的内容设置为空即可。
不过这样的方法会造成重复添加过多额外且无意义的

标签，不利于代码的简洁，而且是结构控制样式，不太好。更好的办法是使用:：after伪元素：

这种方法的好处是通过CSS伪元素:：after巧妙地在父容器内部末尾生成了元素，与添加额外的<div class=‘box3’>作用一致，且使用content= ""又能让生成的元素不占用任何空间；由于通过::after伪元素生成的元素是内联元素，而 clear: both需要添加到块级元素上才能发挥作用，所以还需要为生成的内容设置display: table/block。
ps: display: table或者 display: block两者很多情况下是一样的，但是
设置为display:table; 没有内容也会自成一行，设置为display:block;没有内容不会自成一行。



2.3解决垂直外边距重叠问题：
原理：在Box2上面设置内容，将box1和box2的外边距隔开


其中display设为block，没有内容不占位置，起不到隔离的作用，inline-block相当于一个字的作用，会多出一部分内容，而table是块元素，但内容是空的（有内容的空间），不占位置。
4.clearfix
将高度塌陷和外边距重叠整合到一起

等同于：

使用时将元素添加clearfix类即可。
5.总结：
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
部分参考：
https://www.jianshu.com/p/785b2d195696
https://zhuanlan.zhihu.com/p/25321647