css浮动

浮动float

CSS的 float 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它。

元素只能左右浮动，不能上下移动
一个浮动会尽量向左/右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止
浮动元素之后的元素会围绕它，之前的元素不受影响

语法	说明
float: left	表明元素必须浮动在其所在的块容器左侧
float: right	表明元素必须浮动在其所在的块容器右侧

清除浮动clear

clear属性规定了元素的哪一侧不允许浮动元素

语法	说明
clear : left	在左侧不允许浮动元素
clear : right	在右侧不允许浮动元素
clear : both	在左右两侧均不允许浮动元素

清除浮动的几种方法

从上面两张图可以看到，当内层元素加了浮动之后，div的高度塌缩了，因为内层元素此时已经脱离了文档流，父元素不再包含它。为了避免这种情况，可以清除浮动来使父元素撑开。

使用一个空标签：空标签位置不同效果也不同。

通过 ::after 伪元素设置clear属性:.parent::after这中间没有空格！！

/* new clearfix */
.clearfix::after {       #css3为了更好地区分伪类和伪元素，用两个冒号:表示   
    content: "";         #通过content属性来添加样式（显示生效）使用一个空标签
    display: block;      #::after表示在当前元素的内容后插入一个子元素（行内元素）
    clear: both;
}