css 的浮动属性

浮动原理

在学这部分之前，已经用过很多次float，但都出现了大大小小的问题。一定要掌握细节。

浮动这两个字怎么理解。

浮：元素可以脱离文档流漂浮到网页上面。

动：元素可以偏移位置，挪动到指定位置。

脱离文档流

文档流是元素在页面中出现的先后顺序。

元素在没有任何CSS样式修饰的时候，元素的排列方式就属于正常文档流。即窗体自上而下分成一行一行的，并在每行中按照从左到右的顺序排放元素。

相对于正常文档流，脱离文档流就是打乱了顺序。

float属性

用float来设置浮动，当被设置浮动后，会按照一个指定的方向移动，直至到达父容器的边界，或者另外一个浮动元素时停止。

不同的取值：

none	默认值，不浮动
left	左浮动，沿着父容器靠左排列
right	右浮动，沿着父容器靠右排列

float的注意点

1、float属性不会影响到前面元素。

2、当有内容的时候，内容默认提升半层，实现图文混排的效果。

3、浮动元素默认宽与内容相同。

不希望浮动元素影响后面元素的布局的话，加clear