float和clear都是布局的属性

最新推荐文章于 2024-02-01 22:38:38 发布

原创最新推荐文章于 2024-02-01 22:38:38 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#float #border #div #table #脚本

web页面设计专栏收录该内容

80 篇文章

订阅专栏

本文介绍了CSS中的float和clear属性，包括它们的取值、作用以及如何影响页面布局。通过一个实例展示了不同取值下元素布局的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

</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" onchange="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" onchange="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>

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

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

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

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