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 both清除产生浮动

DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现。 接下来我们来认...

div CSS 清除float常用方法(:after和clear:both)

 很多前端都是用.clearfix:after{ .....}  和 .clearit{....}的组合 来清除浮动, 下面我来讲解下这俩种的用法: 首先大家切页面经常用到浮动 float...

经验分享:CSS div浮动(float,clear) 真的是太棒了

看到这篇文章真是太开心,真的很棒,解决了我菜无数困惑,如获珍宝,好好收藏着! 转载地址:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/298...

html在一行内横向排列并排同行同时显示两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

01/23/2014, Posted in  移动 Comments: No comments 最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容I...

[HTML]DIV+CSS clear both清除产生浮动

DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现。 接下来我们...

div css 中 float left right clear 外框自适应高度问题

在CSS中很多时候会用到浮动来布局,也就是经常见到的float:left或者float:right,前者是左浮动(往左侧向前边的非浮动元素浮动,如果全是浮动得元素的话,就按照流式来浮动从左到右,放不下...
  • hzf100
  • hzf100
  • 2011年05月12日 00:26
  • 396

关于div+css的用法总结

  • 2007年06月20日 16:09
  • 289KB
  • 下载

div css float浮动用法(left right)

div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如:标签盒子、标签、标签、标签...

div+css用法小节、

小节css
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div+css中clear用法
举报原因:
原因补充:

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