CSS的clear属性
浏览数：30 /
时间：2015年06月09日
以下引用自w3school
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
情况一：DIV1 （灰）左浮动 DIV2（蓝） 右浮动
#div1{ float: left; width: 200px; height: 200px; background-color: #ccc; }
#div2{ float: right; width: 200px; height: 200px; background-color: #0088cc; }
DIV2用clear:left 时，清除浮动做效果
DIV1 clear:right 或 clear:both ，清除不了右浮动。
情况二：DIV1 右浮动 DIV2 右浮动
#div1{ float: right; width: 200px;height: 200px;background-color: #ccc; }
#div2{ float: right; width: 200px;height: 200px;background-color: #0088cc;}
DIV2 clear:right; 清除了右边的浮动
DIV1 clear:right 或 clear:both ， 清除不了右边浮动
情况三：DIV1右浮动 DIV2左浮动
#div1{ float: right; width: 200px;height: 200px;background-color: #ccc; }
#div2{ float: left; width: 200px;height: 200px;background-color: #0088cc; }
DIV2 clear:right ，清除了右浮动
DIV1 clear:left 或 clear:both ，清除不了左浮动
情况四：DIV1左浮动 DIV2左浮动
#div1{ float: left; width: 200px;height: 200px;background-color: #ccc; }
#div2{ float: left; width: 200px;height: 200px;background-color: #0088cc; }
当DIV1用 clear：right 时，清除不了浮动，当DIV2用 clear:left 时，清除左边浮动
结论：
clear是基于顶部边界发生清除。本例DIV1的顶部没有其他标签，无论用clear的任何方向都清除不了DIV2的浮动。而下一个元素DIV2可以判断上一个元素是否发生浮动，排列靠后的标签因清除浮动移至下面。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
