Question

我真的不明白怎么可能

<div style="clear:both"></div>

在Chrome中不起作用。我有这个布局：

<div id="header">...</div>
<div id="content">
    <div id="col1">...</div> <!-- float left -->
    <div id="col2">...</div> <!-- float left -->
    <div id="col3">...</div> <!-- float left -->
    <div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">...</div>

所以，我在页脚之前和/或col3之后使用了clear:both。

它在IE7中都不起作用，但是在这一刻我真的不在乎。

有人可以帮我吗？

我添加更多信息：

#content {
    padding-top: 19px;
    display: block;
}

#col1,
#col3 {
    width: 21%;
    position: relative;
    padding: 0 0 1em 0;
    float: left;
}

#col2 {
    width: 58%;
    position: relative;
    padding: 0 0 1em 0;
    float: left;
}

解决：对不起......我给你的信息还不够！问题是专栏的内容!!在col1中我有一个高度为div的div：40px所以即使内容远远超过40px，对于浏览器来说就像没有溢出一样...... 希望我在解释中已经清楚了.. 然而，汤姆Sarduy的解决方案很有趣，但在IE中不起作用...我昨天和今天尝试过，但它就像风格没有采取...我在浏览器的开发者工具中看到它但它没有被应用

Answer 1

明确：两者在Chrome / IE7中都运行良好。请参阅此示例，了解如何正确使用它。 http://jsfiddle.net/turiyag/LvMRY/2/

您可以发布指向您网站的链接或完整的实际代码吗？

CSS：

div {
    border: 1px solid black;
}

.floaty {
    height: 50px;
    width: 50px;
    float: left;
    background: green;
}

.cleary {
    height: 100px;
    width: 200px;
    clear: both;
    background: cyan;
}

HTML

<html>
    <head>
    </head>

    <body>
        <div class="floaty">Floaty</div>
        <div class="floaty">Floaty</div>
        <div class="floaty">Floaty</div>
        <div class="floaty">Floaty</div>
        <div class="cleary">Cleary</div>
        <div class="floaty">Floaty</div>
        <div class="floaty">Floaty</div>
    </body>
</html>

Answer 2

它确实有效。你只是没有正确使用它。

如果您使用clear:both，则以下元素将仅生效。例如，

floated left | floated left | clear: both;
floated left | clear: left;
floated left | cleawr: right; | floated: left

想象一下“|”之间的每个文字是一个块元素。如果你浮动元素并像上面的例子一样使用clear，代码应该显示如上所示。

点击此处查看实时示例：尝试删除clear属性，您将看到浏览器如何放置“不工作”。

http://jsfiddle.net/6VjSL/

Answer 3

对于语义来说，为这个东西使用类更好。正确的方法是：

HTML

<div id="header">...</div>
<div id="content" class="clearfix">
    <div id="col1">...</div> <--- float left
    <div id="col2">...</div> <--- float left
    <div id="col3">...</div> <--- float left
    <div class="clearfix"></div> <--- DOES NOT WORK
</div>
<div id="footer">...</div>

CSS：

/* new clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

是的，这很丑陋，但效果非常好，使设计师能够清除浮动，而不会隐藏溢出并设置宽度或浮动（几乎）所有内容以完成工作。

Answer 4

那么它在任何地方都不起作用？：O）

您可能也将float:left应用于clear:both div ...

这适用于所有浏览器：

http://jsfiddle.net/kKwkd/

HTML

<div id="header">aaaaaaaaaaaaaaaaaa</div>
<div id="content">
    <div id="col1">bbb</div> <!-- float left -->
    <div id="col2">ccc</div> <!-- float left -->
    <div id="col3">ddd</div> <!-- float left -->
    <div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">xxxxxxxxxxxxx</div>

CSS

#header, #footer{    
    border: 1px dashed blue;
}

#col1,#col2,#col3{
    float: left;    
    border: 1px solid red;
    padding: 50px;
    margin: 10px;
}

Answer 5

使用clear：none;在css属性中。它适用于chrome

Answer 6

我给你的信息还不够！问题是专栏的内容!!在col1中我有一个高度为div的div：40px所以即使内容远远超过40px，对于浏览器来说就像没有溢出一样......希望我在解释中已经清楚了。但是Tom Sarduy的解决方案是有趣，但在IE中不起作用...香港专业教育学院昨天和今天尝试过，但它就像风格没有采取...我在浏览器的开发者工具中看到它但它没有被应用

明确：两者都不适用于Chrome

6 个答案:

HTML

CSS：