什么是高度塌陷?如何解决高度塌陷
1. 高度塌陷的产生原因
父元素在文档流中的高度默认是子元素撑开的,当子元素脱离文档流之后,将无法撑起父元素的高度,也就会造成父元素的高度塌陷。
2. 造成后果
父元素高度一旦塌陷,所有标准流中的元素的位置都将会上移,导致整个页面布局混乱。
3. 解决方案
-
给父元素设置一个默认的高度,但这种方式不太灵活,父元素的高度变为固定高度,当后期进行代码维护,增加或者修改文档内的内容时,需要重新进行设置父元素的高度,违背了高度自适应的原则。
-
在塌陷的父元素的最后添加一个空白的div,然后对该div进行清除浮动
clear:both / left / right
存在问题:会使文档中增加多余的结构,是文档内容结构更加复杂 -
使用after伪类,万能清除浮动方法,是清除浮动最好的解决方案
.box:after{
content:'';
clear:both;
display:block;
.....
}
-
给父元素添加overflow:hidden;属性,这种方式被所有浏览器所支持,但是当给子元素设置定位或者浮动的时候,超出的部分会被裁剪下去。
-
开启父元素的BFC
BFC也是一个面试过程中经常有问到的问题,下面就来介绍一下,什么是BFC,它有什么作用呢?
BFC指块级格式化上下文(块级格式化环境),用于清除浮动,防止margin的重叠
BFC是元素的隐含属性,默认情况下是关闭状态的
开启BFC后,元素具有哪些特性?
- 父元素的垂直外边距不会与子元素重叠
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素可以包含浮动子元素
- 计算BFC高度的时候,浮动子元素也参与计算
- BFC是页面上一个隔离的独立容器,容器里面的子元素不会影响外面的元素
开启BFC的方式
- 设置元素浮动 float: left / right;
- 设置元素绝对定位/固定定位 position: absolute / fixed;
- 设置元素类型为inline-block
- 设置元素属性 overflow: hidden / auto / scroll