CSS:清除浮动

<div id="container">
	<div class="cube"></div>
	<div class="cube"></div>
</div>

#container {
	border: 1px solid #000;
}

#container>.cube {
	height: 200px;
	width: 200px;
	background-color: green;
	float: left;
	border: 1px solid #fff;
}

浮动导致父级div未被撑开，height为0

1.父级div定义height

<div id="container" style="height:200px">
	<div class="cube"></div>
	<div class="cube"></div>
</div>

2.结尾处加空div标签clear:both

<div id="container">
	<div class="cube"></div>
	<div class="cube"></div>
	<div style="clear: both;"></div>
</div>

3.父级div定义伪元素::after

#container::after {
	content: '';
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}

4.父级div定义overflow:hidden

<div id="container" style="overflow: hidden;">
	<div class="cube"></div>
	<div class="cube"></div>
</div>

5.父级div定义overflow:auto

<div id="container" style="overflow: auto;">
	<div class="cube"></div>
	<div class="cube"></div>
</div>

6.父级div也浮动，需要定义宽度

7.父级div定义display:table，需要定义宽度