对于clear：left，我们自然会认为是“清除左浮动”，clear: right是清除右浮动。但是现在想想，这样的理解与表示是不严谨的欠考虑的。一般，现在中文圈流传的表述是：

clear语法：
clear : none | left | right | both

取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象


w3.org官方的解释是：「元素盒子的边不能和前面的浮动元素相邻」

我个人觉得官方解释更好一点。

无论是我“清除左/右浮动”，还是业界流传的“不允许左/右边有浮动对象”，其意思都是，设置的clear的元素让浮动元素如何如何。也就是我让别人如何如何~~大家可以仔细体会，细细感受下……

而官方的说法则是“设置了clear的元素不能怎样怎样”。也就是我自己如何如何~~大家可以再次感受下……

为何官方解释更好呢？难道是“己所不欲勿施于人”的缘故？哈，这个解释赞的，方便记忆。更通俗的原因是：

务必记住这句话：“float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！”

但是，官方的解释似乎拗口，缺少点灵性。于是，我根据自己的感性认知，做了如下理解：

clear语法：
clear : none | left | right | both

取值：
none : 默认值。
left : 左侧抗浮动
right : 右侧抗浮动
both : 两侧抗浮动

“抗”这个拟人化的动词的发起者是设置了clear属性的元素，既形象又释义准确。


想必属性both大家都知道，而clear:left/right最实际也是最常见的用途就是实现垂直环绕布局。比如实现下面布局：

wKioL1bZccCT0K0jAAAn6qB5K6k996.png

哈，我猜想下，估计你会把“头像img”和“姓名”放在同一个父级容器中，而这个父级容器左浮动；然后右侧的信息元素浮动跟随（自适应布局），对不对？

这是业界主流做法，其实是没什么问题的？其实还有一种，本人认为更加语义化。

下面是我自己写的源码，方便大家一起研究和讨论：

<head>
<style>
.panel{
	width:600px;margin:50px auto 20px;border:1px solid blue;
	background:#F5F5F5}
.left{float:left}
.main{
	width:50%;height:60px;
	background: #FFE3D7;}
.side {
    width: 20%;
    background: lightblue;
  }
.panel:after {content:'';display:table;clear:both;}
.panel {*zoom: 1; }
  
</style>
</head>
<body>
<!--clear:both的实现-->
<div class="panel">
<div class="main left">
我是浮动的，父辈管不了我！
</div>
<div class="side left">
我也是浮动的！
</div>
</div>
<!--clear:left/right的实现-->
<div style="width:600px;overflow:hidden; _zoom:1">
<div style="float:left">
<span style="width:100px;height:100px;background:blue;display:block">图片</span>
<strong>姓名</strong>
</div>
<p style="margin-left:110px">我是大学生</p>
</div>
<div style="width:600px; _zoom:1">
<span style="width:100px;height:100px;background:blue;  float:left;">图片</span>
<strong style="float:left;clear:left">姓名</strong>
<p style="margin-left:110px">我是大学生</p>
</div>
</body>