在CSS中clear属性的妙用
这里向大家描述一下在CSS中clear属性妙用,图片和文字元素出现在另外元素中,那么它们(图片和文字)可称为浮动元素(floatingelement)。使用clear属性可以让元素边上不出现其它浮动元素。
在CSS中clear属性妙用
在DIV+CSS设计网页中,经常需要设置多个DIV并列排列,往往是使用float:left或float:right来实现,但问题出现了,当前面并 列的多个DIV总宽度不足100%,下面的的DIV就很可能向上提,和上一行的并列的DIV在同一行,这不是我们想要的结果。使用Clear属性正好可以 解决这一问题,下面引用帮助的介绍:
CSS clear属性
图片和文字元素出现在另外元素中,那么它们(图片和文字)可称为浮动元素(floatingelement)。使用clear属性可以让元素边上不出现其它浮动元素。
注意:当这个属性随着"float"属性一起使用的话,那么结果可能会不尽如人意。
Inherited:No
继承性:无
举例
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"
- content="text/html;charset=utf-8"/>
- <title>无标题文档</title>
- <styletypestyletype="text/css">
- .LeftText{
- margin:3px;
- float:left;
- height:180px;
- width:170px;
- border:1pxsolid#B1D1CE;
- background-color:#F3F3F3;
- }
- .FootText{
- height:180px;
- }
- .Clear
- {
- clear:both;
- }
- </style>
- </head>
- <body>
- <divclassdivclass="LeftText">区块1</div>
- <divclassdivclass="LeftText">区块2</div>
- <divclassdivclass="Clear"></div>
- <divclassdivclass="FootText">区块3</div>
- </body>
- </html>
代码说明:
如果没有Clear这一层,"区块3"会紧接区块2并列在同一行。
加了Clear这一层后,会把上面的浮动DIV的影响清除,使其不至影响下面DIV的布局
本文转载自 http://www.itjianghu.net/120106/40914465057870477.htm
转载于:https://blog.51cto.com/3595505/762272
在CSS中clear属性的妙用相关推荐
- CSS中content属性的妙用
前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
- CSS中clear属性的both、left和right浅析
前端开发中,我们知道clear属性有none.both.left和right四个值. 它们的具体含义如下: none:允许两边都可以有浮动对象: both:不允许有浮动对象; left:不允许左边有浮 ...
- css中clear:both属性的理解及用法
css中clear:both属性的作用是清除浮动,设置了浮动就会破坏文档流结构,影响后边的布局,此时在设置清除浮动便可解决这一问题,可以认为,设置了clear:both的当前元素会把前边元素中设有浮动 ...
- overflow属性html5,什么是css中overflow属性
什么是css中overflow属性 发布时间:2020-07-11 16:06:42 来源:亿速云 阅读:192 作者:Leah 本篇文章给大家分享的是有关什么是css中overflow属性,小编觉得 ...
- html clear的作用,css中clear的作用是什么?
当属性设置float(浮动)时,它的物理位置已经脱离文档流了,但大多时候我们希望文档流能识别float(浮动),或者希望float(浮动)后面的元素不受float(浮动)的影响,这个时候我们就需要使用 ...
- HTML5中margin属性应用,CSS中margin属性及其使用探究
本文向大家描述一下CSS中margin属性的用法,主要包括其属性,使用过程中会遇到的问题,以及一些高级应用等内容,相信本文介绍一定会让你有所收获. CSS中margin问题及使用 margin属性为C ...
- 面试总结(CSS 的盒模型?、CSS 中选择器的优先级以及 CSS 权重如何计算?、CSS 中哪些属性可继承,哪些不可以?、CSS 单位中 px、em 和 rem 的区别?、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际 内容这几个部分 第一种是 W3C 标准的盒子 ...
- CSS中background-position属性
CSS中background属性是经常用到的,可以给某个块设置背景色.以下主要说明以下background-position属性的应用. 一般在设置background属性时的写法是: backgro ...
- php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
最新文章
- 学术报告 | 模拟液态和薄结构之间相互作用的多尺度模型
- 一本算法刷题必读配套书(附链接)
- Varnish 4.0.3详细配置
- python哪一版好用-学习 Python 用哪本书好?
- 谈谈tcp/ip协议
- MongoDB学习系列6: mongodump
- 杭电1166敌兵布阵
- LeetCode 1641. 统计字典序元音字符串的数目(DP)
- 2018年最佳深度学习书单
- 2017.3.18 每日小记
- 数论 中国剩余定理(孙子定理)详解
- 动态物体检测(python)
- cox回归模型python实现_Python用Cox比例风险模型进行生存分析-基于lifelines库
- 实名寻人搜索引擎app_谷歌搜索引擎寻人
- virmach VPS升级Ryzen锐龙主机后vps一直离线无法重置解决办法
- Java笔记16 网络编程
- A53系统移植、内核、文件系统
- Vivado HLS #pragma 学习笔记(一)
- FRP (高性能反向代理应用)
- 英语学习单词篇(15)
热门文章
- 如何打开别人发布的vue项目---express的使用方法
- php怎么代表不同行,php – 单击按钮时显示数据库的不同行
- Android对话框动态加载布局
- coreos 搭建PHP,Linux_用Mac在CoreOS上搭建WordPress的教程,作者以自己的Mac笔记本为例, - phpStudy...
- xml生成java代码_在Eclipse中从XML生成Java代码
- html读mysql数据_html从数据库中读取数据
- 总结之前有道笔记的内容--对于Touch 的不同讲解
- 不要误解【流程管理】这个概念
- 华为5G折叠屏手机,外媒猜长这样
- 亚马逊AI惹众怒:一个没有意识的程序,竟然自己学会了“重男轻女”