清除浮动的两种方式

​<div class="container">
    <div>sibling</div>
    <div>sibling</div>
</div>

.container{
	background-color: red;
}
.container div{
	background-color: yellow;
	float: left;
	margin: 10px;
}

当把div设置为浮动后,由于div脱离了文档流,父类无法撑起高度,所以未能显示背景色.以下提供两种解决浮动的方法:

一、在父元素添加clearfix类

<div class="container clearfix">
    <div>sibling</div>
    <div>sibling</div>
</div>

.container{
	background-color: red;
}
.container div{
	background-color: yellow;
	float: left;
	margin: 10px;
}
.clearfix:after{
    display: block;
    content:'';
    clear: both;
    height:0;
}

二、在父元素添加overflow: hidden属性

<div class="container">
    <div>sibling</div>
    <div>sibling</div>
</div>

.container{
	background-color: red;
	overflow: hidden;
}
.container div{
	background-color: yellow;
	float: left;
	margin: 10px;
}