CSS浮动

属性：float

属性值：left或者right或者none。

none是默认值，不浮动。

添加浮动样式的盒子后会“脱标”，即脱离标准流的控制（标准流：CSS中的最基本的网页布局方式，又称文档流，即盒子按默认方式从左到右或从上到下的排序）。

所以说，浮动可改变盒子默认的排序方式，使其移动到父盒子（父元素）的左边（父盒子顶部的左边）或右边（父盒子顶部的右边）。

示例

添加左浮动​​​​​

然后， 

若改成右浮动，

然后， 

 

 这里div的父亲（父盒子）是body盒子，body盒子的宽度取决于网页的宽度（与屏幕浏览器的窗口大小有关）。

 

添加浮动样式后的盒子的显示模式会变成行内块显示模式。

1.盒子的大小由内容(content)决定   

2.盒子可改变宽(width)和高(height)

3.浮动后的盒子在一行上，若这行装不下，则另起一行放置

4.浮动后的盒子顶端对其且两边无缝隙

 

示例

 因为黄色标记处的那边不能完整地放下另一个盒子，所以开始换行了再放。

 

盒子浮动后的位置将不保留，下面标准流的盒子可能将占据一个盒子浮动前的位置，因此两个盒子可能重叠在一起。

 

浮动前

 

浮动后

 

 

 浮动可影响后面盒子的位置，不影响前面盒子的位置。

 

这时可见第二个盒子与这个红色的盒子重叠在了一起。

 

浮动子盒子常和标准流的父盒子一起使用。

 

（本文仅代表个人观点，如有错误，欢迎批评指出）