浮动

标准流：在页面中标签或元素默认的显示方式就是标准流的显示方式。

语法：
float : left | right

特点：
-设置浮动后，浮动元素不占位置（脱离标准流模式了）
-可以使块级元素在一行上显示（标准流下，块级元素不能在一行上显示）
-浮动可以进行模式转换

作用：
-图片文字环绕的效果
-让块级元素在一行上显示(制作导航，网页面布局中用的多)

1.清除浮动

清除浮动对元素的影响

1.当父容器没有高度，子元素都设置了浮动，布局混乱，需要清除浮动。
使用clear:left | right | both (不是主流方式)
清除左浮动、右浮动或都清除

2.给父元素设置overflow:hidden也可以清除浮动
overflow:hidden还可以将超出父元素的部分隐藏掉(缺点)

3.使用伪元素清除浮动（推荐的方法）

/*使用为伪元素清除浮动*/
            .clearfix:after {
                content:""; /*必须写content*/
                height: 0;
                line-height: 0;
                display: block;
                clear: both;
                visibility: hidden;
            }

            .clearfix {
                /*兼容IE*/
                zoom:1;
            }

由使用了浮动的父元素来调用代码

2.什么时候清除浮动

必须要满足以下两个条件
-父容器没有高度的时候（height:0也不行）
-父容器中的所有子元素都设置了浮动

3.overflow

overflow: visible; 默认值，超出部分也显示出来
overflow: hidden; 将超出部分隐藏
overflow: scroll; 设置滚动条，内容不多时也不合适
overflow: auto; 自适应