CSS中float属性

浮动流的特点

被float 属性修饰的标签就成为了浮动流，就会漂浮在标准流的上层。既然属于浮动流那么他就不在属于标准的文档流，也就脱离了原来的文档流，那么它就不会占用标准的文档流的空间和区域。所有原来标准流的排版就会在剔除浮动流元素之后重新排版，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。

例如：

正常的标准流

如果让div2加上浮动效果之后：

div2加上浮动效果后

由于浮动流漂浮在标准流的上层，因此div2就在div3的上层。div2释放了原来的位置，div3就跟随div1后面重新排版形成新的标准流。

标准流在页面上是上下排列的，浮动流在页面上是左右排列的。因此如果我们吧 div1 和div2设置成浮动流

div1和div2形成新的浮动流

div1和div2形成浮动流进行左右排列，释放原有的空间，div3就会向上移动形成标准流，在div1和div2的下面。

当div1 、div2、div3都加入浮动元素切包含框比较大的时候 

  含框比较大的

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

包含框太窄

虽然标准流不认同浮动流所占区域，但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

通过以上总结的结论：

1.浮动定位是指将元素排除在普通流之外，即元素将脱离标准文档流

2、元素将不在页面占用空间

3、浮动元素依旧位于包含框之内

4、 浮动的元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边框为止

5、如果包含框太窄，那么其它浮动块会自动向下移动，直到有足够的空间，如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

6、浮动元素的外边缘不会超过其父元素的内边缘

7、clear 属性用于清除浮动所带来的影响

注意：clear 属性只能影响使用清除的元素本身，不能影响其他元素