- 浏览: 1510102 次
- 性别:
- 来自: 厦门
文章分类
- 全部博客 (516)
- Java (49)
- Java/Struts 2.0 (25)
- Java/Spring、Spring MVC (11)
- Java/Quartz (3)
- Java/Lucene (6)
- Java/Hibernate (19)
- Java/openJPA (7)
- Java/DWR (7)
- Java/Security、Spring Security/OAuth2 (6)
- Java/Threading (9)
- Java/XML (22)
- java/design pattern (4)
- Android (2)
- JavaScript (46)
- jquery (3)
- DB/MySQL (23)
- DB/Oracle (16)
- PHP (25)
- CSS (20)
- Linux (38)
- C/C++、DLL、Makefile、VC++ (31)
- 正则 (9)
- Eclipse (4)
- 安全、网络等概念 (25)
- 集群 (7)
- 网页 (5)
- 视频\音频 (1)
- HTML (6)
- 计算机数学/算法 (3)
- Virtualbox (1)
- LDAP (2)
- 数据挖掘 (6)
- 工具破解 (1)
- 其他 (13)
- Mail (1)
- 药材 (3)
- 游戏 (2)
- hadoop (13)
- 压力测试 (3)
- 设计模式 (3)
- java/Swing (2)
- 缓存/Memcache (0)
- 缓存/Redis (1)
- OSGI (2)
- OSGI/Gemini (0)
- 文档写作 (0)
- java/Servlet (3)
- MQ/RabbitMQ (2)
- MQ/RocketMQ (0)
- MQ/Kafka (1)
- maven (0)
- SYS/linux (1)
- cache/redis (1)
- DB/Mongodb (2)
- nginx (1)
- postman (1)
- 操作系统/ubuntu (1)
- golang (1)
- dubbo (1)
- 技术管理岗位 (0)
- mybatis-plus (0)
最新评论
-
pgx89112:
大神,请赐我一份这个示例的项目代码吧,万分感谢,1530259 ...
spring的rabbitmq配置 -
string2020:
不使用增强器 怎么弄?
OpenJPA的增强器 -
孟江波:
学习了,楼主,能否提供一份源代码啊,学习一下,十分感谢!!!4 ...
spring的rabbitmq配置 -
eachgray:
...
spring-data-redis配置事务 -
qljoeli:
学习了,楼主,能否提供一份源代码啊,学习一下,十分感谢!!!1 ...
spring的rabbitmq配置
在DIV +
CSS设计网页中,经常需要设置多个DIV并列排列,往往是使用float:left或float:right来实现,但问题出现了,当前面并列的多个
DIV总宽度不足100%,下面的的DIV就很可能向上提,和上一行的并列的DIV在同一行,这不是我们想要的结果。使用Clear属性正好可以解决这一
问题,下面引用帮助的介绍:
CSS clear属性
Image and text elements that appear in another element are called
floating elements. The clear property sets the sides of an element
where other floating elements are not allowed.
图片和文字元素出现在另外元素中,那么它们(图片和文字)可称为浮动元素(floating element)。使用clear属性可以让元素边上不出现其它浮动元素。
Note:
This property does not always work as expected if it is used along with the "float" property.
注意:
当这个属性随着"float"属性一起使用的话,那么结果可能会不尽如人意
Inherited:
No
继承性:
无
可用值
left | No floating elements allowed on the left side 不允许元素左边有浮动的元素 |
right | No floating elements allowed on the right side 不允许元素的右边有浮动的元素 |
both | No floating elements allowed on either the left or the right side 元素的两边都不允许有浮动的元素 |
none | Allows floating elements on both sides 允许元素两边都有浮动的元素 |
举例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .LeftText{ margin: 3px; float: left; height: 180px; width: 170px; border: 1px solid #B1D1CE; background-color: #F3F3F3; } .FootText{ height: 180px; } .Clear { clear:both; } </style> </head> <body> <div class="LeftText">区块1</div> <div class="LeftText">区块2</div> <div class="Clear"></div> <div class="FootText">区块3</div> </body> </html>
代码说明:
如果没有Clear这一层,“区块3”会紧接区块2并列在同一行。
加了Clear这一层后,会把上面的浮动DIV的影响清除,使其不至影响下面DIV的布局
发表评论
-
多浏览器测试的利器-IETester,自带IE5.5,IE6,IE7,IE8等多个内核.
2009-11-05 10:26 2089辛苦做出来的一个网站,到别人的电脑上显示得乱七八糟的,为啥?就 ... -
CSS IE 和 Firefox 的区别
2009-11-05 10:13 1436前言罗唆(其实很多时候没有区别,只是我们没弄好就变成区别了) ... -
第6章 文本属性==>文本缩进 P141
2009-06-05 22:27 948line-height 属性是指文本基线之间的距离,而不是字体 ... -
第6章 文本属性==>文本缩进 P135
2009-05-24 19:55 1221通过使用text-index属性,所有元素的第一行都可以缩进一 ... -
第5章 字体
2009-05-24 19:30 1220字体加粗:font-weight=>值:normal | ... -
第3章 结构和层叠 => 特殊性(优先级) P69
2009-05-03 07:40 1094对于每个CSS规则,用户代理(浏览器)会计算选择器的特殊性,并 ... -
CSS 样式学习库
2009-04-30 23:06 972CSS菜单库 http://www.dynamicd ... -
第2章 选择器 =>伪类和伪元素 P57
2009-04-30 22:33 1452利用伪类选择器和伪元素选择器,可以为文档中不一定具体存在的结构 ... -
第2章 选择器 =>选择相邻兄弟元素P56
2009-04-30 22:28 1580假设你希望对一个标题 ... -
第2章 选择器 =>特定属性选择类型 P49
2009-04-27 00:19 978<!DOCTYPE html PUBLIC " ... -
第2章 选择器 =>属性值选择器 P46
2009-04-26 23:05 982属性值 选择器 除了可以选择有某些属性的元素 ... -
第2章 选择器 =>简单的属性选择器 P44
2009-04-26 22:53 1256如果希望选择有某个属笥的元素,而不论该属性值是什么,可以使用一 ... -
第2章 选择器 =>多类选择器 P41
2009-04-26 22:45 1337现在假设希望class为warni ... -
第2章 选择器 =>类选择器 P39
2009-04-26 11:39 927<!DOCTYPE html PUBLIC " ... -
第2章 选择器 =>选择器分组 P34
2009-04-26 11:03 937<!DOCTYPE html PUBLIC " ... -
第2章 选择器 =>选择子元素 P54
2009-04-26 10:37 1288<!DOCTYPE html PUBLIC " ... -
第1章 CSS和文档局 => @import指令
2009-03-12 22:51 1096与link类似,.@import用于指示WEB浏览器加载一个外 ... -
第1章 CSS和文档局 => link标记 P19
2009-03-12 21:51 1134对于<link>标签的属性详解: ... -
CSS入门4:css选择符
2008-08-11 14:58 792一.选择符模式 模式/含义/内容描述 * 匹 ...
相关推荐
我对css几个主要属性的理解,inline,block,float,clear
本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法,首先我们先看个例子: XML/HTML Code...
NULL 博文链接:https://ywzqzhangjiawei.iteye.com/blog/1490877
第四步,在Firefox浏览器中打开我们要优化的页面(本地的页面也可以),点击右上角的firebug(有个小蜜蜂图标),打开firebug工具窗口,我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。 首先我们来分析最...
本文介绍css中的clear属性使用方法,大家参考使用吧
清除浮动就是指解决浮动元素溢出容器的操作,其方法多种多样,这里我们来看最基本的一种:CSS的clear属性清除浮动的基本用法示例
CSS在图片中的应用 #face { width:580px; clear:both; height:66px; margin:0 auto; font-size:12px; } #face li { list-style:none; padding:0 0 0 25px; margin:0; width:57px; height:26px; line-...
3.7 CSS中的几何题 3.8 本章小结 第4章 盒子的浮动与定位 4.1 盒子的浮动 4.1.1 准备代码 4.1.2 实验1——设置第1个浮动的div 4.1.3 实验2——设置第2个浮动的div 4.1.4 实验3...
3.7 CSS中的几何题 3.8 本章小结 第4章 盒子的浮动与定位 4.1 盒子的浮动 4.1.1 准备代码 4.1.2 实验1——设置第1个浮动的div 4.1.3 实验2——设置第2个浮动的div 4.1.4 实验3——设置第3个浮动的...
Clear type Tuning 中文控制面板
"HTML+CSS总结" ... 设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本...定位的方法是在 CSS 中设置容器的 top、bottom、left 和 right 值,这 4 个值得参照对象是浏览器窗口或父容器。
2、一开始在CSS中clear浮动是默认both,也就是说一开始不能有浮动的。 3、使用的案例:假设我清除第三个DIV的浮动 XML/HTML Code复制内容到剪贴板 <style type=text/css> div{ border:1px solid red;...
3.7 CSS中的几何题 3.8 本章小结 第4章 盒子的浮动与定位 4.1 盒子的浮动 4.1.1 准备代码 4.1.2 实验1——设置第1个浮动的div 4.1.3 实验2——设置第2个浮动的div 4.1.4 实验3——设置第3个浮动的div...
vb clear实例,可以通过这个例子了解clear的用法
CSS clear属性相信大家都有所耳闻吧,下面举例说明下clear属性到底给float(clear常常和float结合使用)带来哪些影响
请确认你安装了最新版的Flash Player,其实这不算是一个严格的Flash地图,我觉得如果你是一个比较大的公司,用这个Flash显示公司在全国各地的办事处地址比较合适,用TXT存储数据,因此所有数据都可在TXT中修改。...
css中3种清除浮动方法css中3种清除浮动方法