<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--float：left向左浮动-->
<!--float：right向右浮动-->
<!--如果一个标签元素设置了浮动效果，那么他是脱离文档流了-->
<!--并且不管它之前是个什么样的元素，浮动过后都是一个块级元素-->
<!--这时，如果他又父级的情况下，它就不受父级管了，必须要清除父级的浮动-->
<style>
.d1{width: 200px;
height: 200px;
background-color: red;
float: left;
}
.d2{width: 200px;
height: 200px;
background-color: pink;
float: right
}
.d3{width: 200px;
height: 200px;
/*clear: both;*/
background-color: purple;}
</style>
</head>
<body>
<div class="d1">123</div>
<div class="d2">456</div>
<div class="d3">789</div>
</body>
</html>
