浮动布局中的高度塌陷问题

高度塌陷：

在浮动布局中，父元素的高度默认被子元素撑开，但当子元素发生浮动时，会从文档流中脱离，此时无法撑起父元素的高度，导致元素的高度丢失，影响页面布局，一般将这种情况叫做高度塌陷。

处理方式：

1. 为父元素设置高度height，此时高度不再被内容撑开，但会造成 子元素溢出 或 父元素空白；
2. 为父元素开启BFC；
3. 使用::after伪元素和clear属性解决高度塌陷；
4. 使用clearfix类同时解决高度塌陷与外边距重叠问题，原理是3，经常使用。

BFC：

全称Block Formatting Context，翻译为块级格式化上下文。它是一个独立的布局环境，或是布局容器，容器内的子元素不会影响到外部。

元素开启BFC后的特点：

1. 开启BFC的元素不会被浮动元素所覆盖；
2. 开启BFC后的元素，子元素与父元素之间的外边距不会重叠；
3. 开启BFC的元素可以包含浮动的子元素。

开启方法：

1. float为元素设置浮动。
2. display：inline-block，flex，table-cell。
3. position开启定位，不能是相对定位relative。
4. overflow设置一个非visible的值，常用hidden或auto。

clear清除浮动：

作用：清除浮动元素对当前元素的影响。

可选值：

1. left：清除左侧浮动元素对当前元素的影响；
2. right：清除右侧影响；
3. both：清除两侧中影响较大的那侧。

原理：设置clear后，浏览器自动给元素添加一个上外边距，上外边距与浮动高度相等，以使其位置不受影响。

使用::after与clear解决高度塌陷问题：

这里应注意：

1. ::after和::before一般结合content使用，content用于给两者提供内容；
2. 由于伪元素选择器选中行内元素，这里要设置为block或table；

原理：这样写相当于在父元素中，浮动元素后新加了一个块元素，给这个块元素设置clear：both后使块元素不受浮动元素影响，处于父元素最下方位置，父元素的高度因为这个块元素的位置而被撑开，同时因为没有设置高度，因此不会对布局产生影响。

使用::before与display:table解决外边距重叠问题：

注意：这里必须使用table块级表格隔开父子元素间的外边距。

clearfix类

这个类是上面两种方法的合并写法，常用于同时解决高度塌陷与外边距重叠问题。