Html&CSS之高度塌陷问题

BFC(Block Formatting Context)

​ 根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

​ 当开启元素的BFC属性以后，元素将会具有如下的特性：

​ 1、父元素的垂直外边距不会和子元素重叠。

​ 2、开启BFC的元素不会被浮动元素所覆盖。

​ 3、开启BFC的元素可以包含浮动的子元素。

​ 如果开启元素的BFC:

​ 1、设置元素浮动。

​ - 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且会导致下面的元素上移，不能解决问题。

​ 2、设置元素绝对定位。

​ 3、设置元素为 inline-block 。

​ - 可以解决问题，但是会导致父元素宽度丢失，不推荐

​ 4、将元素的overflow设置为一个非visible的值，推荐将overflow设置为hidden是副作用最小的开启BFC的方式。IE6及以下不支持，可以通过设置属性 zoom:1; 兼容IE6及以下浏览器，通过设置该属性可以开启hasLayout属性。

高度塌陷问题推荐解决方式

​ 1、可以直接在高度塌陷的父元素的最后，添加一个空白的块元素，比如div

​ 由于这个div没有浮动，所以可以撑开父元素的高度

​ 然后通过clear:both;对其进行清除浮动的影响，这样可以通过空白的块元素撑开父元素的高度，基本没有副作用。

​ 使用这种方式可以解决问题，但是会在页面中添加多余的结构

​ 2、可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动影响，这样做和方法1的原理一样，可以达到相同的效果，而且不会在页面中添加多余的块元素。(最推荐)

			.clearfix::after{
				/* 添加内容 */
				content: "";
				/* 设置为块元素 */
				display: block;
				/* 清除浮动影响 */
				clear: both;
			}

​ 以上IE6不支持，可以使用以下代码兼容：

				.clearfix{
				zoom:1;
				}

3、高度塌陷、父元素和子元素垂直外边距重叠问题最终解决方案

​

.clearfix:before,
			.clearfix:after{
				content: "";
				display: table;
				clear: both;
			}