Question

我在html文件中有以下元素和css。

HTML

<div id="eastern">All times are Eastern</div>
<div id="calendar-container">
    <div id="calendar">
        <div id="saturday"> ... </div>
        <div id="sunday"> ... </div>
    </div>
</div>
<h2>First event</h2>

CSS

#eastern {
    text-align:center;
}
#calendar {
    width:700px;
    margin:auto;
}
#saturday,#sunday {
   width:350px;
   float:left;
}

出于某种原因，<h2>元素在#eastern的右侧浮动。浏览器的行为就像元素完全为空，即使它在#saturdy和#sunday元素中有足够的内容。由于#calendar-container没有被浮动，我认为它应该强制<h2>元素位于其下方。

我知道我可以使用clear来解决它：两者，但我觉得我错过了一些东西。有帮助吗？请？谢谢！

Answer 1

请不要忘记清除＃34;＃calendar＆＃34;通过使用简单的：

#calendar {
    overflow: hidden;
}

甚至更好：您使用带有additional class "clearfix"的清洁版本。如果你这样做，你就会得到你丢失的盒子模型＆＃34;＃calendar＆＃34;背部。现在，您可以将<h2>置于日历下方。

如果您有任何其他问题，请随时告诉我们！

这里有一个完整的例子：

<强> CSS：

#eastern {
    text-align:center;
    }

    #calendar {
        width: 700px;
        margin: 0 auto;
        outline: 1px solid red;
        overflow: hidden; /* dirty version if you don't have a 
        class "clearfix" in your Stylesheet */
    }

    #saturday,#sunday {
       width:350px;
       float:left;
    }

HTML：（清洁版与课程＆＃34; clearfix＆＃34;）

<div id="eastern">All times are Eastern</div>
<div id="calendar-container">
    <div id="calendar" class="clearfix">
        <div id="saturday"> ... </div>
        <div id="sunday"> ... </div>
    </div>
</div>
<h2>First event</h2>

Answer 2

请尝试下面的代码，我已经添加了清除左侧和右侧的清除类：

<强> HTML

<div id="eastern">All times are Eastern</div>
<div id="calendar-container">
    <div id="calendar">
        <div id="saturday"> ... </div>
        <div id="sunday"> ... </div>
    </div>
</div>
<div class="clear"></div>
<h2>First event</h2>

<强> CSS

#eastern {
text-align:center;
}
#calendar {
width:700px;
margin:auto;
}
#saturday,#sunday {
width:350px;
float:left;
}
.clear{
clear:both;
}

浮动元素被忽略

2 个答案: