float和clear都是布局的属性

float
取值：
none  :　默认值。对象不飘浮
left  :　文本流向对象的右边
right  :　文本流向对象的左边

说明：
该属性的值指出了对象是否及如何浮动。请参阅 clear 属性。
当该属性不等于 none 引起对象浮动时，对象将被视作块对象( block-level )，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略。
跟随浮动对象的对象将移动到浮动对象的位置（这两个属性总是结合考虑1.float样式元素2.float样式元素的下面一个元素跟其他元素无关）。浮动对象会向左或向右移动直到遇到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止。
在IE5+中， div 和 span 对象假如没有指定宽度会被分配默认的宽度，而在此前的浏览器版本中则必须指定宽度值才可以呈递此属性。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 styleFloat 。

clear
取值：
none  :　默认值。允许两边都可以有浮动对象
left  :　不允许左边有浮动对象
right  :　不允许右边有浮动对象
both  :　不允许有浮动对象

说明：
该属性的值指出了不允许有浮动对象的边。请参阅 float 属性。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 clear 。

这个是clear的：（css手册上面的例子）

<html xmlns:rdl> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Rainer's Handbook</title> <style> body{margin:0px;padding:12px;background:#FFFFFF;overflow:auto;} body,table,input,select,textarea,a{font-family:verdana,tahoma,arial;font-size:11px;color:#000000;word-break:break-all;} table,img{border:0px;} a{text-decoration:none;color:#003399;} a:hover{color:#000000;text-decoration:underline;} #id_div3{padding-top:8px;border-top:1px solid #000000;line-height:15px;} #id_span3{font-size:10px;font-family:tahoma;} </style> <style> #idParentDiv{width:100%;padding:6px;background-color:buttonshadow;} #idDiv1{color:#FFFFFF;padding:4px;clear:none;} #idDiv2{width:150px;height:40px;background-color:#FF6633;color:#FFFFFF;padding:4px;float:none;} #idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;} </style><script> function rdl_change(e){ var oCodeDiv=document.all("idCodeDiv"); var oDiv1=document.all("idDiv1"); var oDiv2=document.all("idDiv2"); with (document.all("idSel1")){ if (selectedIndex!=0) var sValue1=options[selectedIndex].value; else var sValue1="none" } with (document.all("idSel2")){ if (selectedIndex!=0) var sValue2=options[selectedIndex].value; else var sValue2="none" } oDiv1.style.clear=sValue1; oDiv2.style.styleFloat=sValue2; oCodeDiv.innerHTML="#idDiv1 { clear : "+sValue1+" ; }"+"<br>"+"#idDiv2 { float : "+sValue2+" ; }"; } </script></head> <body> <div id=idParentDiv> <div id=idDiv2>我的ID是<b> idDiv2 </b>。请选择我的<b> float </b>属性的值。</div> <div id=idDiv1>我的ID是<b> idDiv1 </b>。请从下方的第一个选择框内选择我的<b> clear </b>属性的值。从第二个选择框内选择<b> idDiv2 </b>的<b> float </b>属性的值。</div> </div> <br> <table><tr><td> <select id="idSel1" οnchange="rdl_change();"> <option value="null" style="font-weight:bold;">---clear--- <option value="none">none <option value="left">left <option value="right">right <option value="both">both </select> </td><td> <select id="idSel2" οnchange="rdl_change();"> <option value="null" style="font-weight:bold;">---float--- <option value="none">none <option value="left">left <option value="right">right </select> </td></tr></table> <div id=idCodeDiv>#idDiv1 { clear : none ; }<br>#idDiv2 { float : none ; }</div><br> <br> <br> <div id=id_div3>苏昱作品·版权所有<br><span id=id_span3>©2002 Rainer Su . All rights reserved .</span></div> </body> </html>

运行代码 复制代码另存代码 提示：您可以先修改部分代码再运行

我的ID是 idDiv2 。请选择我的 float属性的值。

我的ID是 idDiv1 。请从下方的第一个选择框内选择我的 clear属性的值。从第二个选择框内选择 idDiv2的 float属性的值。

---clear---noneleft rightboth

---float--- noneleft right

#idDiv1 { clear : none ; }
#idDiv2 { float : right ; }

float和clear都是布局的属性相关推荐

图解：实例对比讲解display、float、clear、overflow、visibility属性
1.display属性:block/inline/none display:block(作用是把行属性标签显示成块属性标签,可以设置宽高) : display:inline(作用是把块 ...
用CSS的float和clear创建三栏液态布局的方法(转载）
三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度. ...
【转贴】没有div没有float没有clear没有hack的超强CSS布局
[转贴]没有div没有float没有clear没有hack的超强CSS布局原贴地址:http://parandroid.com/no-float-css-layout/ CSS + XHTML 有多 ...
弹性布局的属性及使用
在平时的我们常用的布局类型有以下几种: 1.浮动+定位 2.自适应(百分比) 3.响应式布局 4.弹性布局(Flex布局) 优点:兼容性支持所有浏览器(Webkit内核的浏览器,要加上-webkit- ...
flex布局——flex-direction属性
1.flex布局原理 1)flex是flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局. 当我们为父盒子设为fl ...
flex弹性布局常用属性
1,flex是一维布局,开启flex布局后,里面所有的元素将被称作item(项目) 1,当给父盒子设为弹性布局后,子元素float,clear和vercital-align属性将失效 3,主要通过给父 ...
CSS之float和clear
文章目录 CSS之float和clear 一.Float属性高度坍塌解决办法方法一: 方法二: 方法三: 字围现象二.Clear属性 CSS之float和clear 盒子布局是现在较为流行的网 ...
Flex布局常用属性简介
flex弹性布局 flex布局与传统布局的区别传统布局: 传统布局,基于盒模型,依赖 display属性 .position属性 .float属性,它对于那些特殊布局非常不方便,比如垂直居中. 兼容 ...
Android：线性布局介绍，线性布局weight属性，线性布局微调参数gravity,线性布局divider
LinearLayout:线性布局一.线性布局介绍新建一个工程然后我们默认的布局,是相对布局, 相对布局的意思是我的控件可以在里面随意放置那如果把这个RelativeLayout 改了呢? ...

float和clear都是布局的属性

float和clear都是布局的属性相关推荐

最新文章

热门文章