一,父容器高度坍塌问题
- 导致的原因 浮动元素脱离文档流,使包含它的无高度样式的父容器感知不到其存在而发生内容无法撑开高度的现象 实例图:

- 解决方案
1.给父容器设置高度样式(
height
) 缺点:只能适用于父容器高度固定的情况下,注定了这种方案很少用;
2.因为浮动元素可以感知到浮动元素的存在,所以可以给父容器也设置浮动样式,使其感知到其内的浮动元素 缺点:给父容器设置了浮动样式后,父容器的父容器也会产生高度坍塌问题;

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

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

after
伪元素,且该伪类元素必须为block
元素,原因是after
伪元素在其父容器的其他标签的最后添加一个元素,渲染顺序排在了其父容器内部的最后,然后设置block
元素是为了不让其它元素与其一排,再对其设置清除浮动,父容器自然就被这个after
伪元素撑开了高度
5.使用块级标签撑开高度,此法和伪类法类似 缺点:增加了无意义的标签
