0

我真的不明白怎么可能

<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>

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

它在 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 我有一个高度为 40px 的 div，所以即使内容远远超过 40px，对于浏览器来说，它就像没有溢出......希望我在解释中已经很清楚了......但是 Tom Sarduy 的解决方案是有趣但在IE中不起作用...我昨天和今天都尝试过，但是好像没有采用样式...我在浏览器的开发人员工具中看到它但没有应用

4

6 回答 6

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>
于 2013-02-06T10:24:37.553 回答
1

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

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

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

想象一下“|”之间的每个文本 是块元素。如果您浮动元素并像上面的示例一样使用 clear，则代码应该显示类似上面的内容。

在这里查看一个实时示例：尝试删除该clear属性，您将看到浏览器如何放置“DOES NOT WORK”。

http://jsfiddle.net/6VjSL/

于 2013-02-06T10:27:28.473 回答
1

使用清除：无；在 CSS 属性中。它将在 chrome 中工作

于 2014-04-22T10:02:23.580 回答
0

对于语义来说，为这些事情使用一个类会更好。正确的做法是：

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 */

是的，它很丑，但效果很好，使设计师能够清除浮动而不隐藏溢出并设置宽度或浮动（几乎）一切来完成工作。

于 2013-02-06T10:27:49.263 回答
0

那么它在任何地方都不起作用？:o)

您可能也将其float:left应用于clear:bothdiv...

这适用于所有浏览器：

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;
}
于 2013-02-06T10:38:11.957 回答
0

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

于 2014-11-05T09:57:06.947 回答