【css问题记录-1.高度塌陷及其解决办法】

css问题记录-1.高度塌陷及其解决办法

1. 概念：什么是高度塌陷？
   在标准流中，父元素高度默认被子元素撑起。但是给子元素设置浮动之后，子元素脱离标准流导致父元素高度塌陷。父元素的兄弟元素都会向上移动，导致页面布局被打乱。
   以下两张图片可以对比添加浮动之后和之前父盒子高度差别。three盒子受到two盒子浮动影响向上移动。导致布局打乱。
   图片1：给two盒子设置了float:left
   
   图片2：未设置浮动时
   
2. BFC介绍
   根据w3c标准，在页面中元素都隐含一个属性Block Formatting Context简称BFC。该属性可以设置打开或者关闭。默认为关闭状态。BFC相当于页面的一个独立容器，容器里面的元素不会影响到外面的子元素和父元素。
   当父元素开启BFC之后，元素将具有如下特性：
   - 父元素的垂直外边距不会和子元素重叠
   - 开启BFC的元素不会被浮动元素所覆盖
   - 开启BFC的元素可以包含浮动的子元素
   - 开启BFC可以解决兄弟元素外边距重合的问题。
3. 如何开启BFC？
   3.1 设置元素浮动（不推荐）
         使用这种方式虽然可以撑开父元素，但是会导致父元素宽度丢失，而且会导致下面的元素上移，不能解决高度塌陷问题。
   3.2 设置元素绝对定位（不推荐），原因后续更新…
   3.3 设置元素为inlin-block、flex或者inline-flex。
         可以解决高度塌陷，到那时也会导致父元素宽度丢失，不推荐。
   3.4 将元素overflow设置为一个非visible的值（推荐）。
         建议将overflow设置为hidden。该种方式为副作用最小的开启BFC方式。
4. 解决高度塌陷方法总结
   4.1 给父元素设置高度。缺点：无法适应子元素高度，导致溢出，不推荐使用。
   4.2 给父元素开启BFC
   4.3 给受影响元素加清浮动clear:both
   4.4在css中通过after伪类向元素最后添加一个空白块元素，然后给空白元素添加清浮动最终推荐方案
   .clearfix:after { content: ""; display: block; clear: both }

---