使用：before和：after属性

Question

我正在尝试正确使用:after和:before CSS，并将样式应用于此：

这里的目标是在父盒子内部安装盒子的固定宽度和高度（不确定我是否正确说出）。

里面的盒子已经过去或溢出。

无论子框有多大，如何设置父框以进行调整？我在这里提到的儿童盒是深灰色的盒子。

<div class="connections-label">
    <div class="connections-avatar"></div>
    <h3><a href="">Christian Blanquera</a></h3>
    <h4>Invested over 5 million cookies in 20 startups</h4>
</div>

.connections-label a 
{
    color:#1c89cc; 
    text-decoration:none
}

.connections-label h4
{
    color:#686868;
    font-style:italic;
}

.connections-avatar
{
    width:50px; 
    height:50px; 
    float:left; 
    background-color:grey; 
    margin-right:10px
}

.connections-label:after
{
    content:"";
}

Answer 1

您正在寻找CSS clearfix解决方案。基本上，浮动元素将从文档的正常流中删除，并且必须为contained。最简单的clearfix是将overflow: hidden;应用于包含浮动元素的元素：

.connections-label {
  overflow: hidden; }

这通常足以满足大多数浮动控制场景。但是，定位元素和溢出内容也将被此CSS裁剪。上面的文章记录了一个更复杂的clearfix将包含浮动元素而不隐藏定位元素：

.connections-label:before,
.connections-label:after {
  content: '';
  display: table; }
.connections-label:after {
  clear: both; }

/* IE6/7 support */
.connections-label {
  display: inline-block; }
.connections-label {
  display: block; }

另外，我最近学到的另一个技巧是将overflow: hidden;应用于浮动元素左侧或右侧的元素，使该元素不会包含在浮动元素下面。它比描述更容易看到，所以请查看我的jsFiddle demo。