对于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最实际也是最常见的用途就是实现垂直环绕布局。比如实现下面布局:
哈,我猜想下,估计你会把“头像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>