html - Clearfix问题

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

问题在于，出于某种原因，父母的身高比预期的要高。如果我删除了：before和：after样式，那么父母的身高是正常的，但是我当然会松开clearfix。

我想知道在引入这些额外样式后如何确保父母的身高没有变化。

这就是我的意思

没有：before和：after样式

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

使用：before和：after样式

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

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

最佳答案

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

.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