CSS浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

网页布局的准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

设置了浮动的元素最重要特性：

1、脱离标准普通流的控制（浮）移动到指定位置（动）

2、浮动的盒子不再保留原先的位置。 

3、浮动元素会具有行内块元素的特性

        1）当块级盒子没有设置宽度，添加浮动后具有行内块元素相似的特性。

        2）浮动的盒子中间是没有缝隙的。

        3）行内元素同理。

1、浮动元素经常和标准流父级搭配使用

方法：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

注意：浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流。

2、清除浮动  语法：选择器{ clear：属性值}；

原因：由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。当清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

属性值	描述
left	清除左侧浮动的影响
right	清除右侧浮动的影响
both	清除左右两侧浮动的影响

 2.1、清除浮动--after伪元素法

        将以下代码添加到父元素中可清除浮动

 .clearfix:after{
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }
        .clearfix{
            *zoom:1;
        }

2.2、清除浮动--双伪元素法

        将以下代码添加到父元素中可清除浮动

 .clearfix:before,.clearfix:after{
            content: "";
            display: table;
        }
        .clearfix::after{   
            clear:both;
            
        }
        .clearfix{
            *zoom:1;
        }