前几天一朋友在群里问clear:left的意思,我以为是简单的清除浮动问题,就让他百度“清除浮动”,导致中间有点小误会。后来我按照他写的DEMO,发现我自己也没完全理解clear:left和clear:right的意思。特别看了下手册,和写了几个DEMO,经过群里其他人指导,总结如下,希望对其他人能有点帮助。

clear的值有四个

  1. none:允许两边都可以有浮动对象;
  2. both:不允许有浮动对象;
  3. left:不允许左边有浮动对象;
  4. right:不允许右边有浮动对象。

老实说,我没真正理解字面上的意思,因为这几段话是有歧义的,例如clear:right的解释是“不允许右边有浮动对象”,我一直以为是清除自身右方(下方)容器的浮动。但其实不是。下面一个一个DEMO的看,希望你能懂left和right到底是清除哪里的浮动。

一、普通浮动,无清除浮动,外容器塌陷:DEMO

二、左浮动,clear:both清除浮动:DEMO

三、右浮动,clear:both清除浮动:DEMO

四、左右浮动,clear:both清除浮动:DEMO

五、左浮动,清除左浮动,左浮动,未清除浮动的塌陷:DEMO

六、右浮动,清除右浮动,左浮动,未清除浮动的塌陷:DEMO

(浮动外层容器加了背景色,如果此元素没有浮动,背景色即会包住他,反之则包不住)

很多人清除浮动喜欢在浮动容器后面加一个空div,div加clear:both,即第二、三、四(因为我加了宽高,一般清除浮动的div都是0,所以看不见),我个人不是很喜欢这种。重点看第五和六,clear什么,就清除自身前面容器对应的浮动。例如五红色是左浮动,那么黄色clear:left就是清除自身前面红色的左浮动,而清除不了后面蓝色的左浮动。六里红色是右浮动,那么黄色clear:right就是清除自身前面红色的右浮动。至于二、三、四里的clear:both,左右浮动都可以清除。

总结:加clear的容器,只能清除自身之前的容器浮动,并且清除浮动方向对应。

<参考:http://ons.me/434.html>

详解CSS中clear属性both、left、right值的含义的更多相关文章

  1. 详解 javascript中offsetleft属性的用法(转)

    详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

  2. CSS学习笔记(9)--详解CSS中:nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  3. (转载)详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  4. 举例详解CSS中的cursor属性

    这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...

  5. 详解css中的position属性

    这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...

  6. CSS中clear属性的both、left和right浅析

    前端开发中,我们知道clear属性有none.both.left和right四个值. 它们的具体含义如下: none:允许两边都可以有浮动对象: both:不允许有浮动对象; left:不允许左边有浮 ...

  7. 举例详解CSS中的继承

    CSS的继承是由所使用的样式属性定义的.换句话说,当你查看CSS属性backgruound-color,你会看到一栏「继承性」,也许你几乎没有在意过它,但是它还是十分有用的.什么是CSS继承 每一个元 ...

  8. 详解CSS中:nth-child的用法

    前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...

  9. 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

随机推荐

  1. CruiseControl.NET配置文件(生产环境版本,与SVN结合自动部署)

    配置如下: 说明:此配置文件的功能是当有SVN修改时,会自动触发并编译发布,间隔为10秒. 由于配置文件上面有注释,如果提示节点配置错误,请删除这些注释. 官方详细节点配置说明:http://www. ...

  2. ELF Executable Reconstruction From A Core Image

    catalog . INTRODUCTION . THE PROCESS IMAGE . THE CORE IMAGE . EXECUTABLE RECONSTRUCTION . FAILURES I ...

  3. TypeScript 素描 - 泛型、枚举

    /* 泛型,好处多多的功能.不过这里最基本的就不打算说了,仅准备说一些 和C#不同的地方 */ /* 泛型接口 GenericIdentityFn 定义了方法的描述等 identity方法则是它的实现 ...

  4. 连续赋值与求值顺序var a = {n:1};a.x = a = {n:2}; alert(a.x);

    代码如下: <script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined ...

  5. 正则表达式:Pattern类与Matcher类详解

    一.捕获组的概念 捕获组可以通过从左到右计算其开括号来编号,编号是从1 开始的.例如,在表达式((A)(B(C)))中,存在四个这样的组: 1     ((A)(B(C))) 2     (A) 3  ...

  6. 【Alpha版本】 第七天 11.15

    一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成 员 昨天完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 完成我要招聘的招聘详情显示,完成简历填写及显示功能 完成我要应聘的 ...

  7. Linux rsync网站目录同步功能的实现

    实现目标: 172.16.1.64服务器上的/var/www/sw_service目录,与172.16.1.60服务器上的/var/www/sw_service目录实现同步, 即1.60主动向1.64 ...

  8. 捉襟见肘之NSMutableSet和NSPointerArray

    用来学习复习记录,其他优秀的译文,点击这里 一.NSMutableSet NSMutableSet和NSMutableArray存放数据方式分别是无序和有序,这说明,数组是可以通过index获取对象. ...

  9. 9.13 JS循环

    循环:循环操作某一个功能(执行某段代码) 四要素: 循环初始值 循环条件 状态改变 循环体       for  穷举     迭代            i++;等价于i=i+1;  ++I;等价于 ...

  10. cocos2d 3.6 win7下的配置

    我搭建cocos2.6的开发环境需要安装工具包括: 1.Visual Studio 2012(由于不兼容win7,需要安装Update 4)和虚拟光驱daemon tool,虚拟光驱的下载地址:htt ...