一开始用clear属性,只是跟float相对使用,今天看视频的时候还是不大明白,查了下资料原来是这样的哦,看咯。

clear属性值有四个clear:both|left|right|none;

作用:该属性的值指出了不允许有浮动对象的边。 这个属性是用来控制float属性在文档流的物理位置的。
当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。

clear:left;表示该元素左边不存在浮动元素; clear:right;表示该元素右边不存在浮动元素;

clear:both;表示该元素两边都不存浮动元素;

clear:none表示两边允许有浮动元素。

下边是套用网友的一个例子

clear:both;

有css定义: p.f1{float:left;width :100px;} p.f2{float:left;width :400px;}
则: <p class="f1">这个是第1项 </p> <p class="f2">这个是第2项 </p> <p >另起一行</p>

以上的第三行,会和第一行排在一起,为什么呢,因为当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档 流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清 除。

所以我们应改为:

如果不用清除浮动,那么第3个<P>的文字就会和第一二行在一起 所以我们在第3个<P>加一个清除浮动。 <p class="f1">这个是第1项 </p> <p class="f2">这个是第2项 </p> <p style="clear:both;">另起一行</p>

div+css中clear用法的更多相关文章

  1. div css float布局用法

    float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...

  2. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  3. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  4. DIV+CSS 中的 overflow:hidden

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...

  5. 如何在Html的div+css中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

  6. DIV+CSS中的滤镜和模糊

    在div+css中,经常会用到div和span 当内容比较多的时候,会用到div 当内容比较少的时候,会用到span 来看下面的代码: <!DOCTYPE html> <html&g ...

  7. css中clear属性的认识

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

  8. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  9. DIV+CSS中标签dl dt dd常用的用法

    转自:http://smallpig301.blog.163.com/blog/static/9986093201010262499229/ < dl>< /dl>用来创建一个 ...

随机推荐

  1. tomcat启动报错No UserDatabase component found under key UserDatabase

    非正常关机,造成了tomcat下conf文件中的tomcat-user.xml文件异常,copy一个新的tomcat-user.xml覆盖就可以了.

  2. ShareSDK分享失败的原因

    关于分享估计很多都用的是ShareSDK的社会化分享,简单方便,支持的种类很多,但是一般的话都还是QQ,微信,新浪微博,腾讯微博为主. 最近需要导入一个分享的模块,失败了几次之后最终成功,分享给大家, ...

  3. CRC循环冗余校验码总结(转)

    转自 http://blog.csdn.net/u012993936/article/details/45337069 一.CRC简介 先在此说明下什么是CRC:循环冗余码校验 英文名称为Cyclic ...

  4. PHP 判断点是否在多边形内

    如何判断一个点是否在一个多边形内,何时会用到这个场景. 我们就模拟一个真是场景.我们公司是快递公司,在本地区域有6个分点.每个分点有3-5个工人负责附近的快递派遣发送,所以根据每个点的服务区域我们就能 ...

  5. 2016-11-05实战-定义ssh服务的日志

    1.编辑/etc/rsyslog.conf 输入 local 0 .*     /var/log/sshd.log   #日志的保存路径 2.定义ssh服务的日志级别 编辑sshd服务的主配置文件:/ ...

  6. MyBatis获取插入记录的自增长字段值

    在Mybatis Mapper文件中添加属性“useGeneratedKeys”和“keyProperty”,其中keyProperty是Java对象的属性名! <insert id=" ...

  7. 用opencsv文件读写CSV文件

    首先明白csv文件长啥样儿: 用excel打开就变成表格了,看不到细节 推荐用其它简单粗暴一点儿的编辑器,比如Notepad++, csv文件内容如下: csv文件默认用逗号分隔各列. 有了基础的了解 ...

  8. ABP集合贴(转)

    ABP集合贴 本文背景 公司最近规划的新框架准备基于ABP来搭建,自从在阳铭博客看到ABP框架的介绍后,就一直持续关注着,但还没真正在实际项目中直接使用ABP,只是自己做了一些学习和Demo.ABP所 ...

  9. JavaScript(三) 正则表达式 以及实现的功能

    RegExp 是正则表达式的缩写.定义RegExp正则表达式 RegExp 对象用于存储检索模式. 通过 new 关键词来定义 RegExp 对象.以下代码定义了名为 p 的 RegExp 对象,其模 ...

  10. 通用js函数集锦<来源于网络> 【二】

    通用js函数集锦<来源于网络> [二] 1.数组方法集2.cookie方法集3.url方法集4.正则表达式方法集5.字符串方法集6.加密方法集7.日期方法集8.浏览器检测方法集9.json ...