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. 参考系列

参考

BFC机制

阮大大的浮动理解

css浮动篇