Float

什么是浮动？

浮动会使得元素向左或者向右移动，周围的元素也会重新布局。（不能上下浮动）
浮动之后的元素会围绕它，浮动之前的元素不会受到影响。

浮动特性

1.脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标。
2.浮动的盒子不再保留原先的位置。

img
{ float:right;
}

清除浮动

额外标签法（傻卵方法）

选择器{
	clear:属性值;
}

属性值	描述
left	不允许左侧有浮动元素 （清除左侧浮动影响）
right	不允许右侧有浮动元素 （清除右侧浮动影响）
both	同时清除两侧浮动影响

实际上多用：both

父元素overflow

给父级元素加上overflow属性，将其属性值设置为hidden、auto或者scroll。

after伪元素

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

 .clearfix {
            *zoom: 1;
        }

双伪类元素清除浮动（MrXi推荐）

 .clearfix:before,
        .clearfix::after {
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }