html - 复制清除 :both element

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