css的float和clear属性详解

关键词:float和clear属性



clear：防止元素包围浮动元素，被清除的元素会下落到浮动元素的下方。

值：left，right，both和none。left选项意味着元素不能包围向左浮动的元素。类似的，right使元素下落到任何向右浮动的项目下方。both值防止元素包围向左或向右浮动的元素。none关闭这一属性，因此用它覆盖之前设置的clear属性。当一个特定标签有样式落到一个浮动元素下方，但是你要标签只在一种情况下包围浮动元素时，这种技巧就很方便。创建一个更具体的样式覆盖这个标签的浮动。

float：移动（浮动）一个元素到浏览器窗口的左边或右边，或者，如果浮动元素是在另一个元素内部，那么就移动（浮动）到包含元素的左边或右边。出现在浮动元素后面的元素上移填满右边（对于左浮动）或者左边（对于右浮动）的空间。然后包围浮动元素。给简单的效果使用浮动，比如把一张图片移动一张网页上，或者用于非常复杂的布局。

值：left，right和none。none完全关闭浮动，当一个特定标签带有一个应用了向左或者向右浮动的样式，而你要创建一个更具体的样式覆盖这个标签的浮动时，none值就很方便。



总结：

float:left 对它所在的div和并列的后面的div是不影响的，影响它内部的div；

要想用float把几个div飘到一行，注意display：inline是否有写，是否写对；

clear写在float所在div内部，对该float没影响。写在它外面才会对之后的div起作用。