clear：left;表示左侧不能有浮动元素。

　　clear：right;表示右侧不能有浮动元素。
　　clear：both;表示左右两侧都不能有浮动元素。

　　但在使用时，还得考虑css优先级问题。相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高 。

　　当所有元素的clear属性都设为right时，由于优先级的原因，并不是所想的那样：右侧没有浮动元素，而是右侧出现了浮动元素。

　　比如下面的代码：

　　

<html>

<head>

<style type="text/css">

.div1

{

height:40px;

width:40px;

background-color:red;

position:releative;

float:left;

clear:right;

}

.div2

{

height:40px;

width:40px;

background-color:green;

position:relative;

float:left;

clear:right;

}

.div3

{

height:40px;

width:40px;

background-color:yellow;

position:relative;

float:left;

clear:right;

}

.div4

{

height:40px;

width:40px;

background-color:black;

position:relative;

float:left;

clear:right;

}

.div5

{

height:40px;

width:40px;

background-color:blue;

position:relative;

float:left;

clear:right;

}

</style>

</head>

<body>

<div class="div1">

</div>

<div class="div2">

</div>

<div class="div3">

</div>

<div class="div4">

</div>

<div class="div5">

</div>

</body>

</html>

clear-right

　　其中：class优先级关系： div5>div4>div3>div2>div1

　　所以，呈现出下图情况：

　　

　　当所有元素的clear属性都设为left时，由于优先级的原因，并不是所想的那样：右侧可以有浮动元素，而是右侧不能出现浮动元素。

　　比如下面的代码：

<html>

<head>

<style type="text/css">

.div1

{

height:40px;

width:40px;

background-color:red;

position:releative;

float:left;

clear:left;

}

.div2

{

height:40px;

width:40px;

background-color:green;

position:relative;

float:left;

clear:left;

}

.div3

{

height:40px;

width:40px;

background-color:yellow;

position:relative;

float:left;

clear:left;

}

.div4

{

height:40px;

width:40px;

background-color:black;

position:relative;

float:left;

clear:left;

}

.div5

{

height:40px;

width:40px;

background-color:blue;

position:relative;

float:left;

clear:left;

}

</style>

</head>

<body>

<div class="div1">

</div>

<div class="div2">

</div>

<div class="div3">

</div>

<div class="div4">

</div>

<div class="div5">

</div>

</body>

</html>

clear-left

　　其中：class优先级关系： div5>div4>div3>div2>div1 。

　　所以，呈现出下图情况：

　　我有时偶尔还是会绕晕。。反正，了解了css优先级问题，就容易理解了。

对css中clear元素的理解的更多相关文章

  1. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

  2. tomcat的配置文件server.conf中的元素的理解

    tomcat的配置文件server.conf中的元素的理解 tomcat作为一个servlet服务器本身的配置文件是tomcat_home/conf/server.conf,这个配置文件中有很多元素, ...

  3. CSS中的元素分类

    CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...

  4. CSS中盒模型的理解

    今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...

  5. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  6. css中clear属性的认识

    今天在看博客园的页面布局时发现有不少空白的div只有css属性:clear:both. 然后去W3C文档里和百度补脑了一下,总结如下: 这是之前我写的一段测试代码: <div style=&qu ...

  7. 关于CSS中的元素定位

    ---恢复内容开始--- CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定 ...

  8. CSS中设置元素的圆角矩形

    圆角矩形介绍 在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...

  9. CSS中 隐藏元素的常用方法

    在CSS中,使某个元素在页面中消失的方法有很多,今天为大家介绍几种我常用的方式 . 一.display:none;   让元素直接从页面消失,不占用尺寸,会改变页面布局. 代码演示: 页面演示:在页面 ...

随机推荐

  1. jquery动态刷新select的值，后台传过来List<T>，前台解析后填充到select的option中

    jquery动态刷新select的值:将后台传来的List<T>赋值到select下的option. 第一个select选择后出发该方法refreshMerchant(params),传递 ...

  2. iOS审核秘籍】提审资源检查大法

    iOS审核秘籍]提审资源检查大法 2015/11/27 阅读(752) 评论(1) 收藏(6) 加入人人都是产品经理[起点学院]产品经理实战训练营,BAT产品总监手把手带你学产品点此查看详情! 本篇主 ...

  3. Portable Operating System Interface for uni-X

    https://kb.iu.edu/d/agjv Short for "Portable Operating System Interface for uni-X", POSIX ...

  4. 经验分享：Xcode 创建.a和framework静态库【转】

    作者:Haley_Wong 最近因为项目中的聊天SDK,需要封装成静态库,所以实践了一下创建静态库的步骤,做下记录. 库介绍 库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态 ...

  5. WINDOWS命令和批处理

    转:http://www.cnblogs.com/itech/archive/2009/04/15/1436409.html 另外查看WIndows和Linux的所有命令:http://www.ss6 ...

  6. iOS:命令行方式使用OSChina托管私有代码

    一.介绍 在项目开发中,使用版本控制工具是必不可少的开发工具,它可以帮助我们程序员写完代码后及时提交备份,防止因个人操作导致代码被误删除了或者丢失了,安全可靠.同时,使用版本控制器工具也可以很方便的进 ...

  7. Git-克隆仓库

    二 克隆Git仓库     1.1 从远程仓库中克隆整个代码仓库 mkdir 17Cy //在当前路径下新建一个文件夹,用来存放将要拉取的整个代码库 cd 17Cy  //进入这个文件夹 repo i ...

  8. html中表table行循环滚动例子

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><meta h ...

  9. Tomcat6.0+Jdk1.5+Axis1.3搭建java webservice环境，并使用c#调用该服务。

    java jdk:jdk1.5.0_17 下载网址:http://pan.baidu.com/s/1gdmAkgV tomcat 6.0 下载地址:http://tomcat.apache.org/d ...

  10. AngularJS安装配置与基础概要整理（上）

    以前整理的,可供参考. 安装: 1.首先要安装node.js和它的npm包管理系统.(nodejs相关待整理) 2.安装grunt .grunt是一个基于任务的Javascript工程命令行构建工具. ...