1. float属性
1.1 浮动的定义及理解
任何元素浮动后都会变成块级元素。
CSS的float使元素脱离文档流（指元素在文档中不占位置了），按照指定的方向发生移动，直到它碰到父元素的边框或者另一个浮动元素的边框为止（浮动不会重叠）。浮动最初是用于图像环绕文字，所以尽管元素设置浮动后不占据位置，但文字仍能环绕在浮动元素周围，而不是被浮动元素覆盖。
① 浮动元素的外边缘碰到包含框的情况：
框一向右浮动，直至它碰到了父元素的边框
② 浮动元素碰到另一个浮动元素的边框的情况：
框一、框二、框三均为向左浮动元素
1.2 float属性的取值
| 值 | 说明 |
| left | 向左浮动 |
| right | 向右浮动 |
| none | 默认值，不浮动 |
1.3 清除浮动带来的影响
如果父元素不设置高度，浮动元素会使得父元素高度塌陷，故需要清除浮动带来的负面效果。
<!--父元素塌陷-->
<head>
<style>
.box1{
background-color: deepskyblue;
}
.one{
width: 200px;
height: 200px;
background-color: palegoldenrod;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: plum;
float: left;
}
.three{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2{
width: 100%;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="box2"></div>
</body>如果没有浮动，原先的父元素的高度由子元素的内容撑开，故会显示背景颜色；但添加浮动后，子元素脱离了文档流，此时父元素中没有内容将其撑开，故背景颜色消失。
清除浮动的方法：
① 浮动元素的父元素设置高度：
该方法的缺点是，必须能够确认父元素的高度。
<head>
<style>
.box1{
background-color: deepskyblue;
height: 200px;/*为父元素设置高度*/
}
.one{
width: 200px;
height: 200px;
background-color: palegoldenrod;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: plum;
float: left;
}
.three{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2{
width: 100%;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="box2"></div>
</body>② 浮动元素的父元素设置overflow:hidden|auto;
设置该属性后会自动寻找父元素的高度。
原理是：添加overflow属性自动开启了BFC格式，即块级格式上下文，变成独立的一块，子元素不会在布局上影响父元素。
一般不使用auto，因为auto在元素溢出时会出现滚动条。
<head>
<style>
.box1{
background-color: deepskyblue;
overflow:hidden;/*为父元素添加overflow属性*/
}
.one{
width: 200px;
height: 200px;
background-color: palegoldenrod;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: plum;
float: left;
}
.three{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2{
width: 100%;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="box2"></div>
</body>③ 受影响的元素添加clear属性（clear属性的取值：left、right、both）
该方法的缺点是不能找到父元素的高度，只能做到清除浮动，父元素的背景颜色仍无法显示。
<head>
<style>
.box1{
background-color: deepskyblue;
}
.one{
width: 200px;
height: 200px;
background-color: palegoldenrod;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: plum;
float: left;
}
.three{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2{
width: 100%;
height: 400px;
background-color: red;
clear:both;/*为受影响的元素添加clear属性*/
}
</style>
</head>
<body>
<div class="box1">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="box2"></div>
</body>④ 空div法
在最后一个浮动的元素后面，新添加一个div标签并设置clear属性。
该方法的缺点是，页面新增了很多空的div元素。
<head>
<style>
.box1{
background-color: deepskyblue;
}
.one{
width: 200px;
height: 200px;
background-color: palegoldenrod;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: plum;
float: left;
}
.three{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2{
width: 100%;
height: 400px;
background-color: red;
}
.clear{
clear:both;/*空div元素设置clear属性*/
}
</style>
</head>
<body>
<div class="box1">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="clear"></div><!--在浮动元素后增加一个空的div元素-->
</div>
<div class="box2"></div>
</body>⑤ 伪对象法
为父元素添加伪对象::after，内容置空，并使用clear:both;和display:block;
<head>
<style>
.box1{
background-color: deepskyblue;
}
.one{
width: 200px;
height: 200px;
background-color: palegoldenrod;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: plum;
float: left;
}
.three{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2{
width: 100%;
height: 400px;
background-color: red;
}
.box1::after{
content:"";
display:block;
clear:both;
}/*为父元素添加伪对象::after*/
</style>
</head>
<body>
<div class="box1">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="box2"></div>
</body>