1.添加浮动

CSS大体上有三种基本的定位机制：标准流，浮动，定位

首先我们知道div是块级标签，自带一个换行，也就是说它在页面独占一行，自上而下排列，也就是传说中的 标准流（指文档内元素的流动方向。内联元素从左到右，遇到阻碍换行执行;块级元素独占一行，从上往下排列。）
标准流 又被称为“文档流”或“普通流”。

从图中不难看出即使div1和div2宽度完全可以在一行内承载得下，但div2也不会排在div1后面，这就是标准流中的div。

如果想要多个div排列在同一行内，显然标准流是无法实现的，这就需要浮动来完成了。浮动可以理解为是该元素脱离标准流，漂浮在标准流上面。
例如：将div2添加左浮动，就会发现div3变矮了，其实是div2脱离了标准流，div1，div3，div4还在标准流里，所以他们自上而下依次排列，div3向上移动占据了div2的位置，重新形成了一个标准流。

如果把div2，div3都设置右浮动呢

同理，div2，div3浮动，不在属于标准流，div4会向上移动与div1重新形成一个标准流，由于设置的是右浮动，页面右边为头，所以从左往右来说 div2会排列在div3后面。

在这两个例子中我们不难发现，div2都设置了浮动，但是并没有直接在div1后面排列，而是在div1下面。所以我们得出结论：如果某个div元素A设置浮动，该元素的上一个元素B也是浮动的，那么A会跟在B后面显示，如果该元素的上一个元素C是标准流，那么A的顶部总是与C的底部对齐。

2.清除浮动

我们在使用浮动的时候难免会出现 “ 浮动溢出 “ 的现象，因为我们在开发过程中无法得知子元素的高度，所以没有办法给父元素设置一个固定准确的高度，当子元素设置浮动时，父元素的高度会出现坍塌的效果，所以我们需要清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            border: 1px solid;
            background-color: aqua;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

清除浮动最常用的四种方法：

额外标签：谁需要清除浮动就在该元素后面添加一个空白标签，属性设置为：clear:both
<div class="parent">
<div class="son"></div>
<div style="clear: both;"></div>
</div>

父元素添加overflow:hidden
父元素设置高度
建立伪类选择器清除浮动

.parent:after {
            /* 设置添加子元素的内容是空 */
            content: '';
            /* 设置添加子元素为块级元素 */
            display: block;
            /* 设置添加的子元素的高度0 */
            height: 0;
            /* 设置添加子元素看不见 */
            visibility: hidden;
            /* 设置clear：both */
            clear: both;
        }