clear

clear 属性规定元素的哪一侧不允许其他浮动元素

元素盒子的边不能和前面的浮动元素相邻

clear: none | left | right | both;

描述
none 默认值。允许浮动元素出现在两侧
left 左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素

凡是 clear:left 或者 clear:right 起 作用的地方,一定可以使用clear:both替换

原因: float 属性要么就 left 要么就 right,不可能同时存在,同时由于 clear属性对“后面的”浮动元素不闻不问,因此,当clear:left有效的时候,clear:right 必定无效,也就是此时clear:left等同于设置clear:both;同样地,clear:right如果 有效也是等同于设置clear:both。由此可见,clear:left和clear:right这两个声明就 没有任何使用的价

clear 属性只有块级元素才有效

::after 等伪元素默认都是内联水平,这就是借 助伪元素清除浮动影响时需要设置display属性值的原因。

.clear:after {
   content: ''; 
  display: table;   // 也可以是'block',或者是'list-item'   
  clear: both; 
} 

由于clear:both的作用本质是让自己不和float元素在一行显示,并不是真正意义上 的清除浮动,因此float元素一些不好的特性依然存在,于是,会有类似下面的现象。

  • 如果 clear:both 元素前面的元素就是 float 元素,则 margin-top 负值即使设 成-9999px,也不见任何效果。
  • clear:both 后面的元素依旧可能会发生文字环绕的现象

本篇借鉴出版书张鑫旭的CSS世界

你可能感兴趣的:(clear)