详解CSS中clear属性both、left、right值的含义
前几天一朋友在群里问clear:left的意思,我以为是简单的清除浮动问题,就让他百度“清除浮动”,导致中间有点小误会。后来我按照他写的DEMO,发现我自己也没完全理解clear:left和clear:right的意思。特别看了下手册,和写了几个DEMO,经过群里其他人指导,总结如下,希望对其他人能有点帮助。
clear的值有四个
- none:允许两边都可以有浮动对象;
- both:不允许有浮动对象;
- left:不允许左边有浮动对象;
- 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的容器,只能清除自身之前的容器浮动,并且清除浮动方向对应。
详解CSS中clear属性both、left、right值的含义的更多相关文章
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- CSS学习笔记(9)--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- (转载)详解Javascript中prototype属性(推荐)
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- 举例详解CSS中的cursor属性
这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- CSS中clear属性的both、left和right浅析
前端开发中,我们知道clear属性有none.both.left和right四个值. 它们的具体含义如下: none:允许两边都可以有浮动对象: both:不允许有浮动对象; left:不允许左边有浮 ...
- 举例详解CSS中的继承
CSS的继承是由所使用的样式属性定义的.换句话说,当你查看CSS属性backgruound-color,你会看到一栏「继承性」,也许你几乎没有在意过它,但是它还是十分有用的.什么是CSS继承 每一个元 ...
- 详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...
- 详解Javascript中prototype属性(推荐)
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
随机推荐
- CruiseControl.NET配置文件(生产环境版本,与SVN结合自动部署)
配置如下: 说明:此配置文件的功能是当有SVN修改时,会自动触发并编译发布,间隔为10秒. 由于配置文件上面有注释,如果提示节点配置错误,请删除这些注释. 官方详细节点配置说明:http://www. ...
- ELF Executable Reconstruction From A Core Image
catalog . INTRODUCTION . THE PROCESS IMAGE . THE CORE IMAGE . EXECUTABLE RECONSTRUCTION . FAILURES I ...
- TypeScript 素描 - 泛型、枚举
/* 泛型,好处多多的功能.不过这里最基本的就不打算说了,仅准备说一些 和C#不同的地方 */ /* 泛型接口 GenericIdentityFn 定义了方法的描述等 identity方法则是它的实现 ...
- 连续赋值与求值顺序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 ...
- 正则表达式:Pattern类与Matcher类详解
一.捕获组的概念 捕获组可以通过从左到右计算其开括号来编号,编号是从1 开始的.例如,在表达式((A)(B(C)))中,存在四个这样的组: 1 ((A)(B(C))) 2 (A) 3 ...
- 【Alpha版本】 第七天 11.15
一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成 员 昨天完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 完成我要招聘的招聘详情显示,完成简历填写及显示功能 完成我要应聘的 ...
- Linux rsync网站目录同步功能的实现
实现目标: 172.16.1.64服务器上的/var/www/sw_service目录,与172.16.1.60服务器上的/var/www/sw_service目录实现同步, 即1.60主动向1.64 ...
- 捉襟见肘之NSMutableSet和NSPointerArray
用来学习复习记录,其他优秀的译文,点击这里 一.NSMutableSet NSMutableSet和NSMutableArray存放数据方式分别是无序和有序,这说明,数组是可以通过index获取对象. ...
- 9.13 JS循环
循环:循环操作某一个功能(执行某段代码) 四要素: 循环初始值 循环条件 状态改变 循环体 for 穷举 迭代 i++;等价于i=i+1; ++I;等价于 ...
- cocos2d 3.6 win7下的配置
我搭建cocos2.6的开发环境需要安装工具包括: 1.Visual Studio 2012(由于不兼容win7,需要安装Update 4)和虚拟光驱daemon tool,虚拟光驱的下载地址:htt ...