css中的float的使用

2019独角兽企业重金招聘Python工程师标准>>>

DIV CSS中float用法是通过CSS定义float（浮动）让div样式层块，向左或向右（靠）浮动。 它的作用就是改变block对象的默认显示方式. block对象设置了float属性之后,它将不再独自占据一行.
float即为浮动，在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念：

• 文档流：在html中文档流即为元素从上至下排列的顺序。
• 脱离文档流：元素从正常的排列顺序被抽离。
• 最左边/最右边：上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）。

一、float语法：
float : none | left |right

参数值：
none : 　对象不浮动
left : 　对象浮在左边
right : 　对象浮在右边

 

二、如何使用float?

你可以浮动元素的右侧或左侧。它们会自动停靠在元素的周围.如果float:left则会浮动在左边,而float:right则会浮动在右边,当然还可以使用样式清除左，右浮动或两项：

clear: left; clear: right; clear: both;

浮动图像向左：
img.float { float:left;clear:left; margin:5px;}

浮动图像向右：
img.float { float:right;clear:right; margin:5px;}

当了解了float属性的用法，你可以开始使用它来布置网页.而好处是，你不必担心被用于IE或Firefox的不同。

 

三、使用float和clear属性的一些重要准则:

◆一个float对象，将从其置身的block级非float内容流中跳出，换句话说，如果你要将一个box向左边float，它后面的block级非float对象会显示到下方，inline级内容会在旁边包围

◆要让一段内容从一侧包围一个float对象，这段内容必须要么是inline级的，要么也设置为相同方向的float

◆一个float对象，如果没有设置宽度，则会自动缩成其包含的内容的宽度，因此最好为float对象明确设置宽度

◆一个设置了clear属性的对象，将不会包围其前面的float对象

◆一个既设置了clear又设置了float属性的对象，只有clear:left属性生效，clear:right不起作用

转载于:https://my.oschina.net/u/2391658/blog/835304