对css中clear元素的理解
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元素的理解的更多相关文章
- HTML和CSS设置动态导航以及CSS中伪元素的简单说明
HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...
- tomcat的配置文件server.conf中的元素的理解
tomcat的配置文件server.conf中的元素的理解 tomcat作为一个servlet服务器本身的配置文件是tomcat_home/conf/server.conf,这个配置文件中有很多元素, ...
- CSS中的元素分类
CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...
- CSS中盒模型的理解
今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...
- CSS中box-sizing属性的理解与部分用法
今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...
- css中clear属性的认识
今天在看博客园的页面布局时发现有不少空白的div只有css属性:clear:both. 然后去W3C文档里和百度补脑了一下,总结如下: 这是之前我写的一段测试代码: <div style=&qu ...
- 关于CSS中的元素定位
---恢复内容开始--- CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定 ...
- CSS中设置元素的圆角矩形
圆角矩形介绍 在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...
- CSS中 隐藏元素的常用方法
在CSS中,使某个元素在页面中消失的方法有很多,今天为大家介绍几种我常用的方式 . 一.display:none; 让元素直接从页面消失,不占用尺寸,会改变页面布局. 代码演示: 页面演示:在页面 ...
随机推荐
- Python起步（2）
单行注释:#多行注释:'''或""" 一条语句写在一行之内,不需要分号分隔两条语句在同一行,中间分号隔开缩进语句块中只有一条语句,可以直接写在“:”之后使用“\”进行续行 ...
- windows下安装redis以及测试
Window 下安装 下载地址:https://github.com/dmajkic/redis/downloads. 下载到的Redis支持32bit和64bit.根据自己实际情况选择,将64bit ...
- Unity学习疑问记录之新GUI
学习Unity 4.6新GUI系统 http://segmentfault.com/a/1190000000642686
- angularJs的ng-class切换class
在angular中为我们提供了3种方案处理class: 1:scope变量绑定 2:字符串数组形式. 3:对象key/value处理. 第一种我们不推荐使用,看看其他两种解决方案: 字符串数组形式 字 ...
- [转]java动态代理（JDK和cglib）
转自:http://www.cnblogs.com/jqyp/archive/2010/08/20/1805041.html java动态代理(JDK和cglib) JAVA的动态代理 代理模式 代理 ...
- Inside Flask - 配置的实现
Inside Flask - 配置的实现 flask 的配置对象 app.config 本身使用很简单,无非就是以字典的形式使用,而它的实现,本身就是以字典的形式的. 在 flask/config.p ...
- Eclipse新增Web项目
[前置条件] 1. 电脑已安装JDK1.6,并成功配置环境变量 2. 电脑已存在tomcat6.0包,无需安装 [操作步骤] 1. 为eclipse配置tomcat6.0 (1)eclipse菜单栏, ...
- insert table 和create table as 区别
首先,最大的区别是二者属于不同类型的语句,前者是DML语句(数据操作语言,SQL中处理数据等操作统称为数据操纵语言),完成后需要提交才能生效,后者是DDL语句(数据定义语言,用于定义和管理 SQL 数 ...
- Flume -- 开源分布式日志收集系统
Flume是Cloudera提供的一个高可用的.高可靠的开源分布式海量日志收集系统,日志数据可以经过Flume流向需要存储终端目的地.这里的日志是一个统称,泛指文件.操作记录等许多数据. 一.Flum ...
- TCP中异常关闭链接的意义 异常关闭的情况
终止一个连接的正常方式是发送FIN. 在发送缓冲区中 所有排队数据都已发送之后才发送FIN,正常情况下没有任何数据丢失. 但我们有时也有可能发送一个RST报文段而不是F IN来中途关闭一个连接.这称为 ...