CSS中的float表示的是浮动，当元素设置了float属性就会脱离标准流，浮动在其他元素上，它会根据属性值向左或者向右浮动

 

　　CSS中的float属性是一个频繁用到的属性，对于初学者来说，如果没有理解好浮动的意义和表现出来的特性，在使用的使用很容易陷入困惑，云里雾里，搞不清楚状态。接下来将在文章中为大家详细介绍这一属性，希望对大家有所帮助。

 

　　float属性

 

　　float，顾名思义就是浮动，设置了float属性的元素会根据属性值向左或向右浮动，我们称设置了float属性的元素为浮动元素。

 

　　元素使用了float属性后，可以使该元素脱离标准流本身，浮动在其他元素之上，使其不再占用原本属于该元素的空间，这样会导致后面的元素上移并占用原本属于该元素的空间。

 

　　例：

 

　　<divclass="box">

 

　　<spanclass="float-ele">

 

　　浮动元素

 

　　</span>

 

　　普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通

 

　　文档流普通文档流普通文档流普通文档流普通文档流普通文档流

 

　　</div>

 

　　float属性的理解

 

　　1.float属性仅对使用该属性的元素本身以及后面的元素产生影响（后面元素会上移-->页脚块上移）。

 

　　2.内联元素使用了float属性后就会变成块级元素，就可以设置元素的高度和宽度(参考A标签)。

 

　　3.float属性一般配合后面标签的clear属性共同使用，以便清除float属性带来的对后面元素的影响。

 

　　4、使用float属性的元素，如果未设置元素宽度，则元素宽度自动调整为适应内容的宽度（参考内容DIV--内容块的大小未定义，则自动调整）。





本文转载自中文网