CSS float定位
属性float的值很简单,可以设置为left、right、或者默认值none。
当设置了元素向左或者向右浮动时,元素会向其父元素的左侧或右侧靠紧。但请注意,这里不是靠在了父元素的边界border上。
浮动的位置计算是:父元素的内边距+自己的外边距
<div class="father">
<div class="son1"></div>
</div>
设置son1块向左浮动,.son1{ float:left; }
结果:son1块和father块之间有间隙
原因:因为父元素father有设置padding:10px, son1块浮动到父元素最左端位置的计算是父元素的padding-left +自己的margin-left (父级的左内边距+自己的左外边距),所以,肯定有间隙。如果想浮动到父块的边界border上,就把父块的padding和子块的margin设置为0
示意图:
当float为right时,效果也一样。
如果子块son1的margin为负数,上述理论仍然正确,子块能浮动到的最左端依然是父块的padding-left加上这个负数,只不过视觉上子块会移动到父块的外面。
清除浮动的影响,使用clear属性,可能的值:
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |