html - Clearfix 问题

Question

<div class="parent">
    <div style="float:left;">
        Content 1
    </div>

    <div style="float:right;">
        Content 2
    </div>
</div>


CSS:

.parent {
    normal styling for parent
}

.parent:before,
.parent:after {
    content: "";
    display: table;
}

.parent:after {
    clear: both;
}

问题是由于某种原因， parent 的高度比预期的要大。如果我删除 :before 和 :after 样式，那么 parent 的高度是正常的，但当然我会松开 clearfix。

我想知道如何确保在引入这些额外的样式后 parent 的高度不会改变。

这就是我的意思

没有 :before 和 :after 样式

------------------------------------------
\content1                        content2\
------------------------------------------

使用 :before 和 :after 样式

------------------------------------------
\content1                        content2\
\                                        \
------------------------------------------

出于某种原因，它会在不需要时引入额外的空间。

Answer 1

尝试在伪元素中定义高度:

.parent {
    border: 2px solid red;
    max-width: 300px;
    margin: auto;
}
.parent:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
}

https://jsbin.com/nesumimato/edit?html,css,js,output