none
css的clear属性 RRS feed

  • 问题

  •         <div style="float: left; background-color: Red;">
                Red
            </div>
            <div style="clear: right; float: left; background-color: Green;">
                Green
            </div>
            <div style="float: left; background-color: Blue;">
                Blue
            </div>
    不明白这三个div为什么会在一行上,我觉得Green的clear: right;就没起作用?
    如果把Green的clear: right;改成clear: left;   IE和Mozilla Firefox显示的效果还不一样,为什么?
    2009年10月11日 2:41

答案

  • 都是float:left,所以都在一行
    显示不同,是浏览器对css的解释差异导致的。为了避免出现差异,一般可以这么做

    <div style="clear: left; font-size:0;height:0px;"></div>
    <div style="float: left; background-color: Green;">

    注意:页面前面要指定dtd
    <!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">
    【孟子E章】
    • 已标记为答案 m s 2009年10月11日 10:10
    2009年10月11日 4:45
    版主
  • clear: right 是清除右浮动的 你都设置左浮动 当然无效的
    都是float:left,所以都在一行 不一定正确要看宽度空间是否足够
    如果把Green的clear: right;改成clear: left;  我测试了 IE和Mozilla Firefox显示的效果一样, 我用aspx页面测试的 孟老师已经说明<!DOCTYPE 了
    • 已标记为答案 m s 2009年10月11日 10:10
    2009年10月11日 8:45
  • 因为此元素没有设置右浮动 当然清除右浮动换行无效 这是规范
    你用ie7测试 那是个bug
    给你说个笑话 你开车明明知道向左走 你故意犯规你的大脑命令 向右走 你这时发生什么 是否很矛盾
    • 已标记为答案 m s 2009年10月11日 10:11
    2009年10月11日 10:02
  • 因为不向右浮动,所以清除右浮动无效,这样好像能理解,但不知道是不是规范所讲的意思。暂时先这么理解吧。
    谢谢。
    • 已标记为答案 m s 2009年10月14日 10:36
    2009年10月11日 10:10

全部回复

  • 都是float:left,所以都在一行
    显示不同,是浏览器对css的解释差异导致的。为了避免出现差异,一般可以这么做

    <div style="clear: left; font-size:0;height:0px;"></div>
    <div style="float: left; background-color: Green;">

    注意:页面前面要指定dtd
    <!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">
    【孟子E章】
    • 已标记为答案 m s 2009年10月11日 10:10
    2009年10月11日 4:45
    版主
  • clear: right 是清除右浮动的 你都设置左浮动 当然无效的
    都是float:left,所以都在一行 不一定正确要看宽度空间是否足够
    如果把Green的clear: right;改成clear: left;  我测试了 IE和Mozilla Firefox显示的效果一样, 我用aspx页面测试的 孟老师已经说明<!DOCTYPE 了
    • 已标记为答案 m s 2009年10月11日 10:10
    2009年10月11日 8:45
  • 首先,孟老师说的几点我试了,都没错。
    你说的,第二句话同意。
    第三句话,你可能用IE8测的,我用IE7测得,不论是html还是aspx,显示效果都不一样(都有<!DOCTYPE ......)。这个不要紧了,用孟老师的方法或者升级一下IE就行。
    但是,第一句话,还是不明白,我设置了左浮动,它的清除右浮动就不管用了吗,为什么当然无效?

    2009年10月11日 9:01
  • 因为此元素没有设置右浮动 当然清除右浮动换行无效 这是规范
    你用ie7测试 那是个bug
    给你说个笑话 你开车明明知道向左走 你故意犯规你的大脑命令 向右走 你这时发生什么 是否很矛盾
    • 已标记为答案 m s 2009年10月11日 10:11
    2009年10月11日 10:02
  • 因为不向右浮动,所以清除右浮动无效,这样好像能理解,但不知道是不是规范所讲的意思。暂时先这么理解吧。
    谢谢。
    • 已标记为答案 m s 2009年10月14日 10:36
    2009年10月11日 10:10