一、理解clear: left/clear: right

当想到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属性的元素,既形象又释义准确。

实例出真知
您可以狠狠地点击这里:clear:left/right的作用效果demo
详解CSS中clear:left/right的用法

例如上图所示的clear:left作用示意:图片左浮动,化身魔鬼,要影响后面相邻的元素。一般的元素都逃不了被影响被束缚的命运。除非拥有clear技能。例如,这里clear:left左侧抗浮动,也就是,左侧的浮动根本就奈何不了我——我还是原原本本在下面显示。

但是,如果图片是右浮动,则clear:left仍逃不过沦陷的命运,可以看到父级容器的高度塌陷了!

单纯的clear:left就像是招潮蟹,一侧雄起,一侧不举。
因此,考虑到通用性,在抗浮动的处理中,我们都是使用clear:both. 用意很明显:我不必关心你是左浮动还是右浮动,我都通通免疫。

因此,我们才会有下面这段雕琢后的清除浮动通用CSS:

CSS Code复制内容到剪贴板
  1. .fix { *zoom: 1; }   
  2. .fix:after { content: ''; display: table; clear: both; }  

下面又有问题了,貌似我们接触的clear基本上都是both值,似乎left, right值的出现就是鸡肋,没什么用。真的是这样吗?
二、clear:left/right的实际用途

clear:left/right最实际也是最常见的用途就是实现垂直环绕布局。

出个简单的题目,下图所示的布局实现,你的HTML结构会是?
详解CSS中clear:left/right的用法

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

这是业界主流做法,其实是没什么问题的?

不过,你有没有细细思考过这样一个问题:“为何大家几乎都是这种HTML结构设计?”

实际上,按照我不专业的理解,头像、姓名、自我描述应该是平级的兄弟关系。从语义来看,貌似“头像、姓名”硬生生变成儿子和女儿是不妥的吧~~

当我们只知道票子放银行钱会变多,我们就只会存钱理财。同样的,并不是我们不想尝试其他的结构实现布局,而是,我们不知道方法。说穿了,就是对clear:left/right理解不透,不够重视!

如何“头像”、“姓名”、“自我描述”三兄弟平起平坐,同时达到我们想要的布局效果呢?就是借助clear:left, 半壁clear属性配合float属性可以实现“垂直环绕布局”。

何为“垂直环绕布局”?上面提供的demo中有示意:
详解CSS中clear:left/right的用法

两个图片实际上都是右浮动(float: right)的,这种情况下,显然,图片会是一行排排站。但是,如果后面一张图片设置了右侧抗浮动声明:clear: right. 则,后面一张图片就会落下来,形成垂直布局;加上自身的浮动特性依旧存在,于是,两张图片犹如一个浮动整体。这就是典型的“垂直环绕布局”。

于是,我们如下HTML以及CSS,就有符合题目要求的新型布局方式啦!

CSS Code复制内容到剪贴板
  1. <div style="width:500px;font-size:12px;overflow:hidden;_zoom:1;">   
  2.     <span style="float:left;width:96px;...">头像</span>   
  3.     <strong style="float:left;clear:left;...">姓名</strong>   
  4.     <p style="margin-left:106px;...">我是一个帅哥……</p>   
  5.  </div>  

详解CSS中clear:left/right的用法

至此,三兄弟终于平起平坐啦!

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。