1.浮动定位的特点：
- 脱离文档流、不占据位置，不受默认排列方式的控制（左到右、上到下）
- 不论怎么浮动，依旧在盒子里
- 元素会停靠在父元素的左边或右边，或者停靠在已经浮动元素的左边或者右边
- 块级元素浮动之后，宽度自适应不再是100%
- 行内元素浮动之后，会变为块级元素
2.浮动属性
- float：none：默认，没有设置浮动定位
- float：left：左浮动
- float：right：右浮动
3.简单例子
<body>
<div class="mydiv">
<div class="d1">第一个</div></div>
<div class="d2">第二个</div>
<div class="d3">第三个</div>
<div class="d4">第四个</div>
<div class="d5">第五个</div>
</div>
</body>
没有设置前的效果：
分别给四个盒子设置做浮动之后：
.d1,.d2,.d3,.d4,.d5{
width: 100px;
height: 100px;
float: left;
}
.d1{
background-color:blue;
}
.d2{
background-color:pink;
}
.d3{
background-color:green;
}
.d4{
background-color:purple;
}
.d5{
background-color:red;
}
</style>
<body>
<div id="mydiv">
<div class="d1">第一个</div></div>
<div class="d2">第二个</div>
<div class="d3">第三个</div>
<div class="d4">第四个</div>
<div class="d5">第五个</div>
</div>
</body>
效果图：
4.父元素塌陷
因为浮动定位是脱离文档流的，不占据位置，如果一个元素的子元素设置了浮动，且该元素没有设置高度，那么该元素也就是父元素的高度就会变成0，这就是父元素高度塌陷。
比如上述例子中的mydiv盒子，我们加上边框之后就能清楚地看到效果：
那么在这种情况下，我们就需要清除浮动。
5.清除浮动（解决父元素塌陷）
- 给父元素设置高度（会固定高度，一般不建议使用）
<style>
#d{
/*1.给父元素设置高度 height*/
height: 300px;
}
#d1{
width: 80px;
height: 80px;
float: left;
background-color: red;
}
#d2{
float:left;
width: 100px;
height:80px;
background-color: green;
}
#d3{
float:left;
width: 120px;
height:80px;
background-color: blue;
}
</style>
<body>
<div class="clearDiv" id="d">
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
<div id="d3">这是div3</div>
</div>
</body>
- 给父元素设置一个overflow（需要溢出的部分也会被隐藏，不推荐使用）
<style>
#d{
/*3.给父元素设置一个overflow*/
overflow: hidden; /*溢出隐藏*/
}
#d1{
width: 80px;
height: 80px;
float: left;
background-color: red;
}
#d2{
float:left;
width: 100px;
height:80px;
background-color: green;
}
#d3{
float:left;
width: 120px;
height:80px;
background-color: blue;
}
</style>
<body>
<div class="clearDiv" id="d">
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
<div id="d3">这是div3</div>
</div>
</body>
- 给父元素添加一个最小的儿子（添加一个空的块级元素） 给这个儿子设置clear:both （添加无意义的语义，不利于后期维护，不推荐）
<style>
/*3.给父元素添加一个最小的儿子，给这个儿子添加clear：both;*/
.clear{
clear: both;
}
#d1{
width: 80px;
height: 80px;
float: left;
background-color: red;
}
#d2{
float:left;
width: 100px;
height:80px;
background-color: green;
}
#d3{
float:left;
width: 120px;
height:80px;
background-color: blue;
}
</style>
<body>
<div class="clearDiv" id="d">
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
<div id="d3">这是div3</div>
<div class="clear"></div>
</div>
</body>
- 给父元素使用CSS的:after伪元素（推荐使用）
<style>
/* 4.给父元素设置after 给after设置clear:both */
.clearDiv:after{
content:'' ;
display: block;
clear: both;
}
#d1{
width: 80px;
height: 80px;
float: left;
background-color: red;
}
#d2{
float:left;
width: 100px;
height:80px;
background-color: green;
}
#d3{
float:left;
width: 120px;
height:80px;
background-color: blue;
}
</style>
<body>
<div class="clearDiv" id="d">
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
<div id="d3">这是div3</div>
</div>
</body>