浮动元素周围的边缘？

Question

我正在使用一个页面布局，其中有一个侧边栏/标注框浮动到大块文本内容的一侧，文本内容可能有一些通知横幅，其中散布着不同的背景颜色。

这是问题（完整的JSFiddle here）：

不期望的：

正如模型中的文字所示，请注意粉红色的“通知”横幅与黄色侧边栏重叠（margin仅将文本踢回，而不是与其重叠的块元素的边缘）。我希望它看起来更像：

粉红色的背景停留在侧边栏的边缘。通过设置通知横幅的宽度（因为我知道它会与侧边栏相交），我能够在模型中完成此操作，但如果该通知显示在页面的下方，那么它将不会扩展到整个宽度。

是否有某种结构/风格可以让我实现这种外观，并且可以灵活地了解通知横幅在内容中的位置？

Answer 1

您只需将overflow: auto添加到stop its background from leaking behind the sidebar的通知中，同时保留侧边栏上的边距。

这样做的原因是因为overflow不是visible会干扰浮点数，因为它会创建一个新的块格式化上下文。通常，这会导致框不会与浮点（及其边距，如果有的话）相交。请记住，由于这个原因，如果通知框的任何部分否则将与浮动相交，这将导致整个通知框及其内容被限制为更窄的宽度。您可以通过添加/移动周围段落中的文本和通知框本身来看到这一点（我不能通过小提琴链接轻松演示这一点）。

规范可以这样说，在section 9.4：

  

在块格式化上下文中，每个框的左外边缘触及包含块的左边缘（从右到左格式化，右边缘触摸）。即使存在浮点数也是如此（尽管盒子的线框可能因浮动而缩小），除非盒子建立新的块格式化上下文（在这种情况下盒子本身may become narrower由于浮动）。

哪个指向section 9.5：

  

表的边框，块级替换元素或正常流中建立新block formatting context的元素（例如“溢出”除“可见”之外的元素）不得重叠与元素本身相同的块格式化上下文中的任何浮点数的边距框。如果需要，实现应该通过将所述元素放置在任何前面的浮动下面来清除所述元素，但是如果有足够的空间，可以将它放置在这些浮动的附近。它们甚至可能使所述元素的边框比section 10.3.3.所定义的更窄.CSS2没有定义何时UA可以将所述元素放在浮子旁边或者所述元素可能变得更窄。

虽然第二个引用听起来令人生畏，但你在这里看到的行为是非常一致的，而不是一个边缘情况，你会开始看到实现中的偏差。

Answer 2

你可以很聪明，并使用白色边框隐藏其背后的内容。

像这样：

.sidebar { 
   border-left: 1em solid #FFF;
}

示例：http://jsfiddle.net/UrsLW/7/

结果：

Answer 3

用另一个包装器

包围你的SideBar

<强> HTML：

<div id="test">
    <div class="sidebar">
    </div>
</div>

<强> CSS：

#test
{
    /*moved from your old siderbar*/
    float:right;
    width:40%;
    padding-left:1em;
    /*essential*/
    background-color:white;
}
.sidebar
{
    padding:1em;
    background-color:#FFC;
}

看这里：http://jsfiddle.net/UrsLW/11/

Answer 4

我想到的第一件事是使用CSS3的 box-shadow ，也许？

.sidebar {
    float:right;
    width:40%;
    padding:1em;
    margin-left:1em;
    background-color:#FFC;
    box-shadow: 0px 0px 0px 1em #fff;
}

就此而言，即使是简单的边框也可以。

.sidebar {
    float:right;
    width:40%;
    padding:1em;
    margin-left:1em;
    background-color:#FFC;
    border: 1em #fff solid;
}

当然，这只适用于单色背景。

http://jsfiddle.net/UrsLW/5/