css设置float,【CSS】float属性

float浮动属性

1、作用:

将页面元素浮动起来，使其能够向左或者向右排列

2、应用:

实现页面中布局的左右排版

实现图文环绕的版式效果

3、值：

4、原理:

浮动元素将脱离默认的文档流，漂浮在默认文档流之上

浮动的元素会向左或向右移动，直到它的外边缘碰到父级元素或这个元素之前的另一个浮动元素的边框为止

普通文档流可以看作是一个X、Y轴的平面流，float浮动流可以看到是一个Z轴上的立体流，Float浮动流离眼睛更近，在普通文档流之上

5、特点:

对齐方式

不管元素如何浮动，始终以父级容器或它前面同层次并列的元素作为参考进行对齐。

盒模型的应用

一旦元素浮动起来，就可以直接适用CSS盒子模型属性。(因为行间元素float起来以后，它会脱离默认文档流的行间限制)

比如给元素设置width和height，无效果，让先float起来，然后设置width、height，就有效果。

元素float <