Question

假设您有三个要素：

<header>
    <!-- stuff -->
</header>
<main style="background-color:red;">
    <!-- stuff -->
    <div style="float:left;height:300px;">tall stuff</div>
</main>
<footer style="background-color:blue;clear:both;">
    <!-- stuff -->
</footer>

当然，div会戳出main元素的底部。可以修复插入<div style="clear:both;"></div>元素作为main的最后一个子元素。我讨厌这样做（而且我对这些东西的了解真的已经过时了），我想知道是否有替代品。

Answer 1

你可以使用伪元素只使用CSS：

main:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

Answer 2

是的，您可以将overflow:auto添加到父元素。

<header>
     stuff 
</header>
<main style="background-color:red;overflow:auto;">
     stuff 
    <div style="float:left;height:300px;">tall stuff</div>
</main>
<footer style="background-color:blue;clear:both;">
     stuff 
</footer>

<强> jsFiddle example

复制清楚：两个元素

2 个答案: