div+css中clear用法

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

则：
这个是第1项 
这个是第2项 
另起一行

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

所以我们应改为:

如果不用清除浮动，那么第3个的文字就会和第一二行在一起
所以我们在第3个加一个清除浮动。
这个是第1项 
这个是第2项 
另起一行

div+css中clear用法相关推荐

Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
css中clear:both属性的理解及用法
css中clear:both属性的作用是清除浮动,设置了浮动就会破坏文档流结构,影响后边的布局,此时在设置清除浮动便可解决这一问题,可以认为,设置了clear:both的当前元素会把前边元素中设有浮动 ...
在CSS中clear属性的妙用
这里向大家描述一下在CSS中clear属性妙用,图片和文字元素出现在另外元素中,那么它们(图片和文字)可称为浮动元素(floatingelement).使用clear属性可以让元素边上不出现其它浮动元 ...
min-width、max-width属性中min-content、max-content的含义，css中minmax()用法、1fr单位的含义----使页面具有相应性的属性以及属性值
min-width.max-width属性中min-content.max-content的含义,css中minmax()用法.1fr单位的含义 min-width 表示容器的最小宽度 max-wid ...
html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...
CSS中clear“清除浮动”的作用原理
CSS中clear"清除浮动"的作用原理之前看视频中,总听到说clear不是清除浮动,而是消除浮动带来的影响,纠结了一天,没有理解,现在终于能明白这是什么意思了. 下面直接用代码 ...
html clear的作用,css中clear的作用是什么？
当属性设置float(浮动)时,它的物理位置已经脱离文档流了,但大多时候我们希望文档流能识别float(浮动),或者希望float(浮动)后面的元素不受float(浮动)的影响,这个时候我们就需要使用 ...
DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
css中float用法
文档流:浏览器根据元素在html文档中出现的顺序,从左向右,从上到下依次排列. 浮动属性是CSS中的定位属性,用法如下: float: 浮动方向(left.right.no ...

div+css中clear用法

div+css中clear用法相关推荐

最新文章

热门文章