float布局致使的父容器高度坍塌问题及其解决方法

一，父容器高度坍塌问题

• 致使的缘由 浮动元素脱离文档流，使包含它的无高度样式的父容器感知不到其存在而发生内容没法撑开高度的现象 实例图：

• 解决方案 1.给父容器设置高度样式(height) 缺点：只能适用于父容器高度固定的状况下，注定了这种方案不多用；

  

2.由于浮动元素能够感知到浮动元素的存在，因此能够给父容器也设置浮动样式，使其感知到其内的浮动元素 缺点：给父容器设置了浮动样式后，父容器的父容器也会产生高度坍塌问题；

3.对父容器设置overflow: hidden/auto，触发其BFC 缺点：设置hidden会致使超出部分直接被隐藏，且不占据文档流位置，而设置auto的话超出部分会生成一个滚动条，影响视觉效果。

4.使用伪类元素，再用伪类元素清除浮动 缺点：CSS代码量增多

PS：此法要注意的是，必须是 after伪元素，且该伪类元素必须为 block元素，缘由是 after伪元素在其父容器的其余标签的最后添加一个元素，渲染顺序排在了其父容器内部的最后，而后设置 block元素是为了避免让其它元素与其一排，再对其设置清除浮动，父容器天然就被这个 after伪元素撑开了高度

5.使用块级标签撑开高度，此法和伪类法相似 缺点：增长了无心义的标签