首页 > 开发 > CSS > 正文

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

2024-07-11 08:55:07
字体:
来源:转载
供稿:网友

一、理解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
2015619180709513.png (507×210)

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

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

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

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

CSS Code复制内容到剪贴板
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表