<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>float演练</title>
<style>
#div1 {
border: 2px;
background-color: deeppink;
width: 800px;
height: 600px;
position: relative;
}
/*当元素绝对定位后，会脱离文档流，这时候用清除浮动的方式实现不用*/
#div2 {
border: 2px;
background-color: sandybrown;
width: 200px;
height: 100px;
position: absolute;
left: 20px;
top: 10px;
}
#div3 {
border: 2px;
background-color: darkred;
width: 200px;
height: 100px;
}
/*新建一个元素顶替因绝对定位失去的文档流，大小，高度都一样*/
#padding {
border: 2px;
/*background-color: red;*/
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">div1
<div id="div2">div2</div>
<div id="padding" style="clear: both"></div>
<div id="div3">div3</div>
</div>
</body>
</html>
