浮动

浮动的特点：会半脱离标准流，也是盒子本来是独占一行的，可能不独占一行。可以想象地上很多盒子，盒子悬空了，后面的盒子可以靠着前面的盒子排了。又为什么说他是半脱流呢，是因为现在的盒子可以占着原来盒子的位置，但是内容还是要从前面盒子的边界以外开始布置。其实整个一句话就一个意思就是说下面的浅灰色的div和浅蓝色的div排放，并且浅蓝色是跟在浅灰色后面。

作用：更方便的布置图文环绕。还有就是解决 div转化为行内块由于分行写两个标签引起的换行问题。更方便的布局操作。

由于设置浮动后其他的影响： 举一个例子： 比方说上面一个div 放个两个div，如果该父div没设置高度，两个子div设置了宽度和高度，如果再往父div 下面放一个div，下面的div会和上面的div y方向相同的布局。

需要父元素有高度，从而不影响其他网页元素的布局

结果是：

期望是：

解决办法：

1.直接设置父元素高度 缺点：某些动态的可能无法获取父元素的高度

2.额外标签法
做法：1.在父元素内容的最后添加一个块级元素 2.给添加的块级元素设置 clear:both

3.单伪元素清除法

 <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 通过css 添加标签 -->
    </div>
    <div class="bottom"></div>

 /* 单伪元素清除浮动 和 额外标签法原理是一样的 */
        .clearfix::after {
            content: '';

            /* 伪元素添加的标签是行内, 要求块 */
            display: block;
            clear: both;

            /* 为了兼容性 */
            height: 0;
            visibility: hidden;
        }

4.双伪元素清除法

 /*  .clearfix::before 作用: 解决外边距塌陷问题
            外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置
        */
        /* 清除浮动 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        /* 真正清除浮动的标签 */
        .clearfix::after {
            /* content: '';
            display: table; */
            clear: both;
        }

5.给父元素设置 overflow : hidden 这个CSS属性