浮动容器与底部 div 重叠，但不与顶部重叠答案

【问题标题】：Floating container overlaps bottom div, but not top浮动容器与底部 div 重叠，但不与顶部重叠
【发布时间】：2013-06-11 18:20:10
【问题描述】：

嘿，我对这个结构有点不确定。基本上我想要一个有 4 个 div。

<div class="container">
    <div class="top-border"></div>
    <div class="box"></div>
    <div class="bottom-border"></div>
</div>

容器包含三个较小的 div。我的目标是让盒子 div 保存内容，而边框 div 在盒子周围创建一个括号。 Border-top 会向左浮动，border-bottom 会向右浮动。唯一的问题是容器与底部支架重叠，但不与顶部重叠。我也不希望它重叠......有没有办法解决这个问题？

这是一个 JsFiddle：http://jsfiddle.net/6ghzN/

【问题讨论】：

标签： css html positioning

【解决方案1】：

在底部边框的div上，改变

margin-top: -40px;

到

margin-bottom: -8px;

【讨论】：

效果很好，谢谢！我不知道在这种情况下 margin-top 和 margin-bottom 会有所不同。

【解决方案2】：

我会走不同的路，

只需添加.box:before 和.box:after

这样，您就不需要标记所有这些额外的 div！

.container{
    background:#dedede;
    width:80%;
    height:auto;
    float:left;
}
.box{
    height:800px;
    width:100%;
    color:#cecece;
    float:left; 
    position:relative;
}
.box:before{
    content: "";
    width: 40px;
    height: 40px;
    border-left: 8px solid gray;
    border-top: 8px solid gray;
    position: absolute;
    left: -8px;
    top: -8px;
}
.box:after{
    content: "";
    width: 40px;
    height: 40px;
    border-right: 8px solid gray;
    border-bottom: 8px solid gray;
    position: absolute;
    right: -8px;
    bottom: -8px;
}

http://jsfiddle.net/6ghzN/11/

【讨论】：

请注意，:before 和 :after 伪类在 IE7- 中不受支持。 caniuse.com/css-gencontent
我真的很喜欢这个解决方案，但不幸的是我使用的 CMS 目前不支持伪类。以后一定会记住的！

【解决方案3】：

我用这个方法成功了：

1) 从.container 中移除背景颜色并将其添加到.box。

.box{
    ...
    background:#dedede;   
}

2) 在.top-border 右侧添加负边距，使.box 正确浮动：

.top-border{
    ...
    margin-right:-40px;
}

http://jsfiddle.net/6ghzN/2/

【讨论】：

【解决方案4】：

将margin-bottom: -10px; 添加到底部边框类。

jsfiddle

【讨论】：