CSS解决高度塌陷问题

一、高度塌陷出现

默认下父元素包着子元素，如果父元素没设置高度，子元素会撑起父元素；

如果子元素设置为浮动，这子元素会脱离文档流，子元素不能撑起父元素出现高度塌陷。

浮动元素会变成行内块元素。

二、overflow解决高度塌陷

overflow属性规定当内容溢出元素框发生的事情

可取值：visible（默认值）、hidden（内容会被修剪）、scroll（内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容）、auto（如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容）

overflow解决高度塌陷问题：

设置overflow：hidden，会触发BFC机制，开启BFC机制可以包含浮动的子元素

.d1{
    background-color: aqua;
    overflow: hidden;		/* 触发BFC机制，可以包含浮动元素 */
    zoom: 1;		        /* ie6及以下不支持BFC机制  zoom放大的意思 解决ie6 高度塌陷问题*/
}
.d2{
	width: 200px;
	height: 200px;
	background-color: bisque;
	float: left;			/* 左浮动 */
}

<div class="d1">
    <div class="d2">
    </div>
</div>

三、clear解决高度塌陷

clear可以用来清除其他元素对当前元素影响

Note. This property applied to all elements in CSS1. Implementations may therefore have supported this property on all elements. In CSS2 and CSS 2.2 the 'clear' property only applies to block-level elements.

从CSS2和CSS2.2规定clear属性只能用于块级元素。

可取值：none（默认值）、left、right、both

.d1{
    background-color: aqua;
}
.d2{
    width: 200px;
    height: 200px;
    background-color: bisque;
    float: left;			/* 左浮动 */
}
.d3{
    clear: both;		/* 清除了d2对此元素的影响 */
}

<div class="d1">
    <div class="d2"></div>
    <div class="d3"></div>
</div>

四、clear加伪元素清除浮动

.d1{
	background-color: aqua;
}
.d2{
	width: 200px;
	height: 200px;
	background-color: bisque;
	float: left;			/* 左浮动 */
}
/* 使用伪元素清除浮动 */
.clearfix::after{
	content: "";
	display: block;			/* 设置为块元素 */
	clear: both;			/* 清除其他浮动对此元素的影响 */
}
/* 为了兼容ie6 ie6以下不支持after */
.clearfix{
	zoom: 1;
}

<div class="d1 clearfix">
	<div class="d2">
	</div>
</div>