css浮动样式

float的定位方式
当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
同样是脱离正常的文档流，float和absolute还是有区别的，float定位的元素允许文本和内联元素环绕它。 像下面这个例子:

Title .all { width: 300px; height: 300px; background-color: aquamarine; word-wrap: break-word; } .floatBlock { width: 100px; height: 100px; background-color: antiquewhite; float: left; } 二、float的影响\ 包裹性\ float会让元素的display变成inline-block。\

比如一个div未设置width时，默认宽度是100%。在设置了float后，宽度会变为起子元素撑开的宽度。 又比如一个span元素，在设置了float后，width、height等属性会开始对其生效。\

破坏性 因为float脱离了正常的文档流，所以可能会引发高度塌陷。

三、清除浮动的方法
使用伪元素:after
.cl:after{ content: "020"; display: block; height: 0; clear: both; visibility: hidden;
}
在浮动元素的后一个元素上添加clear:both;或者在后面加一个空元素，再加上clear:both;
在浮动元素的父元素上加上overflow属性,
可以看到div2中清除了浮动，预想的结果是div2的高度应该和其浮动的子元素文字一样高，但实际情况是div2的高度随着div1的高度在变化。
当clear应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。\

也就是说div2中那个添加了clear:both;的子元素会移至左右浮动元素的下方，也就浮动的div1下方，所以这个空元素撑开了div2的高度。\