1. 浮动简介
浮动定义：浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
2. 浮动结论
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前，远离页面边缘的一端是后。
<style type="text/css">
.a {
height: 100px;
background-color: green;
width: 100px;
}
.b {
border: solid 2px skyblue;
height: 100px;
width: 200px;
float: left;
}
.c {
height: 200px;
background-color: red;
width: 100px;
}
</style>
<body>
<div class="a"></div>
<div class="b">
</div>
<div class="c">
</div>
</body>
a元素保持不动，b元素浮动起来，c元素顶到b元素的位置。结合评论体会下
3.清楚浮动
3.1 清楚浮动结论
这个结论可以好好体会下
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
结合demo体会下：
3.2 清楚浮动4种方式
- 浮动：脱离文档流
float: right | left | none;
- 清除浮动
clear: left | right | both
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
- 浮动塌陷：父元素没有设置高度时，子元素都浮动，此时父元素的高度就为0了，因为没有子元素撑开高度（如果手动设置父元素高度就不会存在这种问题了）
<!--方式1：新增加个子元素 div clear: both -->
<style type="text/css">
.father {
background-color: pink;
border: solid 2px skyblue;
}
.son1 {
width: 100px;
height: 200px;
background-color: blue;
float: left;
}
.uncle {
height: 100px;
background-color: red;
}
.son3 {
clear: both;
}
</style>
<div class="father">
<div class="son1"></div>
<div class="son3"></div>
</div>
<div class="uncle"></div>
<!--方式2. 给父元素增加(原理跟1一样)-->
.clearfix::after{
content: '',
// 因为默认的伪元素是行元素
display: block,
clear: both
}
<!--方式3. 给父元素增加(溢出隐藏) -->
overflow: hidden //（原理：因为overflow: hidden触发BFC规则，bfc去渲染页面时浮动的元素也参与计算高度）
<!--方式4. 手动给父元素设置高度-->
4. 浮动练习总结
- 浮动元素的开始位置是从父元素内容区域开始的，不包含内外边距和边框
- 浮动元素内部可以再浮动
5. 参考系列
点击咨询 