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

646 阅读1分钟

一,父容器高度坍塌问题

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

浮动导致父容器高度坍塌

  • 解决方案 1.给父容器设置高度样式(height) 缺点:只能适用于父容器高度固定的情况下,注定了这种方案很少用;
    给父容器设置高度

2.因为浮动元素可以感知到浮动元素的存在,所以可以给父容器也设置浮动样式,使其感知到其内的浮动元素 缺点:给父容器设置了浮动样式后,父容器的父容器也会产生高度坍塌问题;

给父容器设置浮动

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

设置overflow样式触发父容器BFC

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

设置伪元素清除浮动
PS:此法要注意的是,必须是after伪元素,且该伪类元素必须为block元素,原因是after伪元素在其父容器的其他标签的最后添加一个元素,渲染顺序排在了其父容器内部的最后,然后设置block元素是为了不让其它元素与其一排,再对其设置清除浮动,父容器自然就被这个after伪元素撑开了高度

5.使用块级标签撑开高度,此法和伪类法类似 缺点:增加了无意义的标签

设置标签清除浮动