padding后下边多了一倍的高度,浏览器显示不一样怎么办？

倒数第四行浮动的英语写错了，float。

清除浮动。

就span不受float的影响

clear:both该属性的值指出了不允许有浮动对象的边。通俗的讲：这段代码的做用是：清除同行元素，不允许其它元素与之在一行内。我经常用的代码。.clear10{clear:both;height:10px;overflow:hidden;}.yao{float:left;width:100px;}大家好我也很好大家好那么.clear10起到的作用就是在清除前两行浮动的影响并且间隔10px的高度。使用下面的大家好与前行不在同一行内。

关于作用他们都解释的很清楚了；不过我有一个小建议，就是在这个style中再加个属性overflow:hidden;因为在ie6下div都会有一个默认的高度，加上这个就能兼容了。

控制相邻的浮动BOX的排列——clear功能说明：控制相邻的浮动BOX的排列。可 取 值：none|left|right|both|inherit初 始 值：none应 用 到：块级元素。可否继承：否。详细解释：① 当clear属性应用于非浮动的块级BOX时，属性值的含义如下：left：生成的BOX的顶边距将增加，直到它的顶部边缘出现在文档中之前元素产生的任何向左浮动的BOX的底外边缘之下。right：生成的BOX的顶边距将增加，直到它的顶部边缘出现在文档中之前元素产生的任何向右浮动的BOX的底外边缘之下。both：生成的BOX将移到源文档中之前元素产生的浮动BOX之下。none：相当于浮动，BOX的位置没有约束。② 如果clear属性设置在浮动元素上，那么将导致对浮动定位的规则做修改，因此加入了以下额外的约束：【浮动的顶部外边缘必须在所有之前的左浮动BOX的底部边缘之下（设置clear:left），或者必须在所有之前的右浮动BOX的底部边缘之下（设置clear:left），或者两者都要（设置clear:both）。】

在ie中会兼容你一些问题 但是其它飞ie内核的就不管你了所以在不需要一个div出现在另一个的同一行就用clear:both;吧

对一个元素声明clear:both，会将来自元素周围的的浮动清除，举一个简单的例子就是当先声明一个元素向左浮动时，那么这个元素的右边就会留出一部分空白，如果这个时候空间可以容下该元素的下一个元素的大小，那么由于此元素声明过浮动向左，那么下一个元素就会自动弥补留下的空间。那么相对这个补缺的元素（本身没有声明浮动），它有一个来自他左方的浮动，如果这个时候对这个补缺的元素声明clear: both;那么它就会忽略上一个元素的浮动声明而不去补之前的空缺。回到题主的问题，由于浏览器是按顺序render（这个我也不好翻译。。）元素的，对#div1和#div2都声明了浮动向左，那么这个时候#div1之前是没有其他浮动元素的，clear：both并不会对之后的#div2产生影响，而相对#div2，由于它之前的#div1声明向左浮动，也就给#div2留出了一部分空间，那么由于#div1声明的向左浮动，#div2默认会自动补全，这个时候再对#div2声明clear:both就会起作用，它就跑到下面去了。至于楼上的第一个例子为什么管用，是因为他限制了parent元素的宽为100pixel,即使#div1向左浮动，也没有空间给#div2补全了，所以#div2只能跑下面去。

清除浮动用的比较多 无浮动还没用过

clear是用于清除float浮动的。如果要举例的话要写很多，你可以这样，在HTML用四个DIV，上下各一，中间两个并排，左边的用float:left浮动到左边，另一个就会，然后在底层用clear:both.在中间左边那个输入一些文字，然后看看效果，可以把尾部的clear加入后看看，再删除后看看，就能了解了。

不用也一样，用了就要用的详细一些，例如div的默认行高问题，还要设置clear:both;line-height:0;font-size:0可以试一下用overflow:hidden;zoom:1当然这也不能所有浮动的地方都有，例如高度自适应用clear:both的时候要注意margin-top会失效，但如果没有margin-top可以直接在下一步父层的样式中写clear:both

这个清除浮动用法，举个例吧<div style="background-color: green;"> <div style="float:left; height: 50px; background-color: red;">这个左浮动</div> <div style="float:right; height: 50px; background-color: blue;">">这个右浮动</div> <div style="clear:both;"></div></div>你试下把 <div style="clear:both;"></div>去掉和保留，再看效果，就明白了

其实究其原因，就两种原理清除与闭合，可以看下我写的这个思路可能会清楚一点网页链接

clear:both是用于清除浮动比如<divstyle="clear:both"><divstyle="float:left"></div><divstyle="float:right"></div></div>解释下1个框框里有2个框框，一个在左边一个在右边，然后把这个2个框框套住的这个外围框框就需要clear:both

float是用在浮动一般一排有两个div你就要加，但加了float就要加宽度要不w3c检验就能会报错clear:both一般是在dw里面错位了就用它

clear:both 用于禁止左右两端出现浮动对象,举个例子更容易理解<div style="float:left; width:100px; height:100px; background-color:#FF0000;">1</div><br><div style="float:left; width:100px; height:100px; background-color:#0000FF;">2</div><br style="clear:both;"><div style="float:left; width:100px; height:100px; background-color:#00FF00;">3</div>这里有两个br,其中后一个应用了clear样式.可以看到它迫使后面的div在新一行重新开始呈现.

clear:both是用于清除浮动比如<divstyle="clear:both"><divstyle="float:left"></div><divstyle="float:right"></div></div>解释下1个框框里有2个框框，一个在左边一个在右边，然后把这个2个框框套住的这个外围框框就需要clear:both

:after伪元素，表示在应用了.cl样式的元素之后应用该样式，内部的content样式表示在.cl样式的元素后添加内容。

意思是：清除两边浮动的容器对象。

你的big为什么要float:left?去掉

你是要制作网页吗？

这是一段用于清除浮动（clearfix）的代码，防止后边的容器因为浮动出现布局的混乱。这个 "020"表示转移字符的空格。这样写好像没什么必要，直接写空格就可以，而且貌似浏览器对生成内容中的转义字符的支持并不好。在 clearfix 中，content 的内容可以为空，即 {content: ""; ...} ，兼容性更好。

检查上层内容是否设置了高度。给他加上.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1} 试试

图片为左浮动，图片的左面和右面都不能有浮动的元素，可以用来做文字环绕效果

overflow:hidden 是隐藏多余部分，clear:both是清除浮动，float:left是左浮动如果同时用到一个标签里overflow没有太大影响，clear跟folat谁用在后面用谁的。_display:inline跟display:inline一般用在浏览器的兼容问题上，你可以看一下css hack

有可能是浏览器兼容性出现问题，建议设置overflow：hidden；

四种清除浮动方法如下：1、使用空标签清除浮动。我用了很久的一种方法，空标签可以是div标签，也可以是p标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义css代码：clear:both。此方法的弊端在于增加了无意义的结构元素。对于使用额外标签清除浮动（闭合浮动元素），是w3c推荐的做法。至于使用元素还是空可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是，本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空比较合适。<!–*{margin:0;padding:0;}body{font:36pxbold;color:#f00;text-align:center;}#layout{background:#ff9;}#left{float:left;width:20%;height:200px;background:#ddd;line-height:200px;}#right{float:right;width:30%;height:80px;background:#ddd;line-height:80px;}.clear{clear:both;}–>leftright2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义css属性：overflow:auto，即可！也可以用overflow:hidden；”zoom:1″用于兼容ie6，也可以用width:100%。不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；<!–*{margin:0;padding:0;}body{font:36pxbold;color:#f00;text-align:center;}#layout{background:#ff9;overflow:auto;zoom:1;}/*overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/#left{float:left;width:20%;height:200px;background:#ddd;line-height:200px;}#right{float:right;width:30%;height:80px;background:#ddd;line-height:80px;}–>leftright3、使用after伪对象清除浮动。该方法只适用于非ie浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。<!–*{margin:0;padding:0;}body{font:36pxbold;color:#f00;text-align:center;}#layout{background:#ff9;}#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}#left{float:left;width:20%;height:200px;background:#ddd;line-height:200px;}#right{float:right;width:30%;height:80px;background:#ddd;line-height:80px;}–>leftright4、浮动外部元素，float-in-float。这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化，所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。<!–*{margin:0;padding:0;}body{font:36pxbold;color:#f00;text-align:center;}#layout{background:#ff9;float:left;}#left{float:left;width:20%;height:200px;background:#ddd;line-height:200px;}#right{float:right;width:30%;height:80px;background:#ddd;line-height:80px;}–>leftright

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#box1{width: 100px;height: 100px;background: seagreen;float: left;}#box2{width: 100px;height: 100px;background: salmon;float: left;}</style></head><body><div id="box1" onmouseover="show()" onmouseout="back()"></div><div id="box2"></div><script>function show() {var qw =document.getElementById("box2")qw.style.background = "wheat";}function back() {var qw =document.getElementById("box2")qw.style.background = "pink";}</script></body></html>

首先，我们制作一个简单的html页面。父级元素是div，内部元素，是两个ul，两个ul分别是左浮动。并且为父级元素添加边框。2/7我们可以发现，父级元素根本没有被子元素的高度所撑开，而是只保持了h标签的高度，这就是浮动，导致的。3/7清除浮动，顾名思义就是clear:both，这的确是一种方法，但是要确定我们的clear:both是应用在哪里。4/7我们可以在html页面上，最后一个浮动元素的后面，添加一个div，并设置其style为clear:both。5/7我们还可以为浮动的元素的父级元素添加伪类，*::after{content""; display:block; clear:both}，这样将会使得浮动止于此6/7除了这些，我们还可以为父级元素添加overflow属性，可以设为hidden,也可以设为auto7/7以上三种方法是小渔自己通过亲身经历，总结而来的哦。正确的页面显示效果如图所示

两个div全部加float:right;可以解决

overflow-y:hidden; overflow-y:scroll; resize:none; 垂直滚动条overflow-X:hidden; overflow-y:scroll; resize:none; 横向滚动条

clear:both 就是清除浮动，上面连个div浮动了，下个div不想浮动就要清除。有如下解释：/* 清理浮动 */.clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}.clearfix { zoom:1;}其原理是，在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块状内容来，并给它设置 clear:both 来清理浮动。在 ie6 和 7 中给浮动块添加 haslayout 来让浮动块撑高并正常影响文档流。另一种简洁的办法：.cf:before, .cf:after { content:""; display:table;}.cf:after { clear:both;}.cf { zoom:1;}原理还是一样的。使用 :after 伪类来提供浮动块后的 clear:both。不同的是，隐藏这个空白使用的是 display: table。而不是设置 visibility:hidden;height:0;font-size:0; 这样的 hack。值得注意的是这里中的 :before 伪类。其实他是来用处理 top-margin 边折叠的，跟清理浮动没有多大的关系。但因为浮动会创建 block formatting context，这样浮动元素上的另而一元素上如果刚好有 margin-bottom 而这个浮动元素刚好有margin-top 的话，应该让他们不折叠（虽然这种情况并不常见）。

在浮动元素的后面加一个空的块级元素(通常是div)，并且该元素设置clear：both属性即可隔开。因为浮动的特点是不影响前面的标准流，只影响后面的标准流，因此我们可以在浮动的末尾设定一个空的块级元素标签即可。

CSS代码啊 楼主可以借本css的书看看 很容易学会的

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin: 0;padding: 0;}aaabody{font-size:12px;}img{border:none;}li{list-style:none;}input,select,textarea{outline:none;}a{text-decoration:none;}/* 清除浮动 */.clearfix:after{content:"";display:block;clear:both;}.clearfix{zoom:1;}

<div style="clear:both"></div>这句话是清除这个div的所有浮动这个与细线表格错位没关系的。<div id="maincontentbox"><div class="left"><div class="indexlistpart">这些是引用类，可以我看不到你的css样式。可惜没见到你详细的源码不然可以帮你解决。

语法：clear : none | left | right | both 取值：none : 默认值。允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 说明：该属性的值指出了不允许有浮动对象的边。float 属性就是浮动对象。

先建立一个 clear浮动的全局样式。在直接在box1 box2 box3 box4 box5 里面直接调用

float:right 就往右边靠了，一般阅读顺序都是从左边开始吧？所以用 float:left clear:both就是把之前的 float清除掉。 例如说，两个宽100px的DIV都float:left，那么它们会靠左边排成一个横行。<div style="float:left; width:100px">1</div><div style="float:left; width:100px">2</div><div>3</div>但是你又加了个DIV。发现3还是跟他们一行，你觉得这样不行。于是clear:left;<div style="float:left; width:100px">1</div><div style="float:left; width:100px">2</div><div style="clear:left;">3</div> 3就在新的一行了

同楼上

下面是一行四张的例子：<style>.box {width:1000px}.box img {float:left; width:250px; height:200px; border:0}.box br {clear:both}</style><div class=box><img src="图片1" /><img src="图片2" /><img src="图片3" /><img src="图片4" /><img src="图片5" /><img src="图片6" /><img src="图片7" /><img src="图片8" /><br /></div>

直接写3个层就可以 3个层的属性中都不要设top属性和position属性。

ALPHA

方法总比问题多

CSS中overflow：hidden的作用是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏，具体应用如下：一、隐藏溢出的部分。比如一个父块级元素里面包含了子块级元素，当子块级元素的高度超过父块级元素的高时，超部分就会隐藏。二、清除浮动。它的功能和clear:both是一个作用，父元素中加了overflow：hidden，子元素的浮动效果就会被清除。CSS（层叠样式表）的特点1、丰富的样式定义CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。2、易于使用和修改CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <title>无标题文档</title> <style type="text/css"> .d01 ul01 li a { display: block; } .d01 { background: #FFCCCC; padding: 5px; margin: 0 auto; width: 500px; } .ul01 { padding: 0; margin: 0 auto; text-align:center; } .ul01 li { list-style-type: none; display:inline; border: #66C 2px solid; margin: 0 -2 0 0; padding: 2px 5px; text-align: center; background: #FF9; } .ul01 li a { text-decoration: none; color: #F63; } .ul01 li a:hover { color: #6CF; } .ul01 li a:active { color: #669900; } #kara { border: 0; margin: 0; padding: 0; clear: both; } </style></head><body> <div class="d01"> <ul class="ul01"> <li><a href="#">Homepage</a></li> <li><a href="#">Photo</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Graphic</a></li> </ul> <div id="kara"> </div> </div></body></html>具体查看我的博客http://hi.baidu.com/sueris%5Fsoft/blog/item/bc0222d4374a210f485403aa.html

在IE6.0用Float会多出3PX;

overflow-y: auto;

清除元素浮动不是用的这个吧，position多数是用于定位的

您发您想实现的效果图，说实在的写的有点乱