clear:left/right 理解

clear在w3.org官方的解释
The clear property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.
盒子的边不和前面浮动盒子相邻
因为html是上下的文档流，所以这里的边指的左边和右边

clear:left/right的实际用途（一）

clear:left/right最实际也是最常见的用途就是实现垂直环绕布局。
下图所示的布局实现，HTML结构

image

可能会把头像div和姓名div放在同一个父级div1中，div1左浮动
自我描述div2右浮动。
这样实现倒是也可以，但是头像 姓名 自我描述按照中文意思均属同级，而此实现方式则把头像 姓名 作为子级。
哪如何将头像 姓名 自我描述作为同级，实现上面的布局呢
这个时候则要借助 clear 实现垂直环绕布局。

    
头像
    
姓名
    
自我描述……

不使用clear的时候，头像和姓名均左浮动，所有姓名会再头像右侧，想要姓名再头像下面，则需要clear姓名的左浮动

image.png

即
使用clear的时候

image.png

clear:left/right的实际用途（二）

由于元素浮动后脱离了文档流，所以父元素是无法根据元素来自适应的。解决此问题最常用的办法由两种，第一种就是在所有浮动元素后加:

如图
使用clear的

使用clear

不使用clear

不使用clear

原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。
第二种办法，使用万能clear：

.clearfix:after 
{ 
visibility: hidden; 
display: block; 
font-size: 0; 
content: "."; 
clear: both; 
height: 0; 
} 
* html .clearfix 
{ 
zoom: 1; 
} 
*:first-child + html .clearfix 
{ 
zoom: 1; 
} 

然后在你需要自适应的元素上加上class=” clearfix”即可。
这里边的原理：
（1）、首先是利用:after这个伪类来兼容FF、Chrome等支持标准的浏览器。
:after伪类IE不支持，它用来和content属性一起使用设置在对象后的内容，例如：
a:after{content:"(link)";}
这个CSS将会让a标签内的文本后边加上link文本文字。
（2）、利用“* html”这个只有IE6认识的选择符，设置缩放属性“zoom: 1;”实现兼容IE6。
（3）、利用“*:first-child + html”这个只有IE7认识的选择符，设置缩放属性“zoom: 1;”实现兼容IE7。

参考
准确理解CSS clear:left/right的含义及实际用途
经验分享：CSS浮动(float,clear)通俗讲解
正确理解 clear:both