clear

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

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

clear: 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世界