前端面试题HTML+CSS基础篇——高度塌陷

什么是高度塌陷？如何解决高度塌陷

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