div+css中clear用法

原创 2015年11月17日 19:44:44

一开始用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用法

div+css中clear用法 一开始用clear属性,只是跟float相对使用,今天看视频的时候还是不大明白,查了下资料原来是这样的哦,看咯。 clear属性值有四个clear:both|l...
  • superman_wind
  • superman_wind
  • 2014年10月24日 00:03
  • 269

matlab中clear的用法

tips: 在matlab中使用clear all的话,运行程序,会清除掉子函数中设置的断点。 matlab中的clear用法: (1) 语法 clear clear name c...
  • wodexihulu
  • wodexihulu
  • 2012年02月27日 10:45
  • 10538

string:clear的用法

clear string:Erases the contents of the string, which becomes an empty string (with a length of ...
  • u011487593
  • u011487593
  • 2014年10月12日 15:45
  • 704

STL vector中的clear方法(18)

原文地址:http://www.cplusplus.com/reference/vector/vector/clear/ public member function std::v...
  • guang_jing
  • guang_jing
  • 2014年08月15日 12:50
  • 1335

string.clear()

     今天看了一段的代码。发现好多的东西平时都没有用过。我们来看看这个吧,是string中的一些函数。它存在C++ library内.被包含进来,在其中的Classes内的Member Funct...
  • liuchunyuan419010677
  • liuchunyuan419010677
  • 2010年01月23日 13:55
  • 9261

vector::clear ()方法的使用细节

原型: #include void clear(): 函数clear()删除储存在vector中的所有元素.
  • rl529014
  • rl529014
  • 2016年02月25日 21:03
  • 14534

Map的clear()方法

问题描述:   在Java语言中,map的clear方法会把整个map清空吗? 问题解答:   是 测试代码:     HashMap hashMap = new HashMap();  ...
  • lianhao19900202
  • lianhao19900202
  • 2016年05月16日 11:18
  • 428

stringstream clear与str("")的问题

因为oj平台需要制作.in .out这样的测试数据,如果偶尔制作到没啥,可题量一大就会出问题,所以我想通过fstream 自动生成这些文件,并使文件名持续增大。像1.in 2.in 3.in…… 这...
  • jcq521045349
  • jcq521045349
  • 2015年11月17日 16:01
  • 567

DIV+CSS中clear:both的作用

DIV+CSS布局的优点不用多说了,现在越来越多站都用这种布局方式,表格布局慢慢的越来越少人用了. 不过DIV+CSS还是有许多不便的,因为他比表格布局难控制,稍做不好,不管是新手还是老手,一不...
  • eric4421
  • eric4421
  • 2011年12月05日 12:32
  • 863

CSS clear的属性及使用方法

CSS clear属性Image and text elements that appear in another element are called floating elements. The ...
  • grong_low
  • grong_low
  • 2010年05月26日 17:18
  • 184
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div+css中clear用法
举报原因:
原因补充:

(最多只允许输入30个字)