CSS常见问题的解决办法

1.项目场景:高度塌陷
问题描述:
父元素由子元素撑开，当子元素全部设置浮动时，父元素的高度将无法被撑开，称为高度塌陷
原因分析:
父元素高度由子元素撑开，当子元素发生浮动时，浮动使元素脱离文档流，因此无法撑开父元素
解决方案:
1，给父元素添加overflow: hidden/auto;当overflow的值不为visible时，就会触发BFC，其中的元素布局不受外界的影响，即可解决高度塌陷问题。但是当内容增多的时候，溢出的内容会被隐藏或产生滚动条，二者不是希望看到的，不推荐使用
⒉.在浮动元素之后添加一个空的块元素，对其添加clear: both即可，也是不推荐使用，平白多个空元素会造成布局上的混乱，不利于后期维护。
3.与方法二本质上相同，但是是用伪元素 :after,利用display: block将其转换成块元素，content : " ,.clearboth;即可解决。

2.项目场景:外边距合并
问题描述:
属于同一个BFC的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠
 
原因分析:
css bug，分为两个BFC就可以消除这种margin重叠
解决方案:
触发其中一个div的BFC，使得两个div不在同一个BFC内，这样就可以阻止这两个div的margin重叠,displayinline-block/overflow: hidden;