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

问题在于，由于某种原因，父母的身高比他们想象的要大。如果我删除了：之前和之后的样式，那么父亲的身高是正常的，但当然我松开了clearfix。

我想知道如何在引入这些额外款式后确保父母的身高不会发生变化。

这就是我的意思

没有：之前和之后的样式

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

使用：之前和之后：造型

------------------------------------------
\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