<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#d1{
border:1px;
solid:#000;
}
#d2,#d3,#d4{
width:200px;
height:200px;
background:red;
}
#d2{
float: left;
}
#d3{
background:green;
float:left;
}
#d4{
background:blue;
float: left;
}
#d1:after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<!--最后一个子元素位置处-->
<!--2.增加一个块级元素-->
<!--3.设置：clear:both-->
</div>
</body>
</html>
原文：http://www.cnblogs.com/zhangailing/p/6664033.html