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

问题是，由于某些原因，父母的身高比预期的要大。如果我去掉了:before和:after样式，那么父元素的高度是正常的，但当然，这样我就失去了clearfix。

我在想，在引入这些额外的样式后，如何才能确保父母的身高不会改变。

这就是我的意思

不使用:before和:after样式

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