我正在使用一个页面布局，它有一个侧边栏/标注框，它 float 到一大块文本内容的一侧，并且文本内容可能有一些带有不同背景颜色的通知横幅。
这是问题(完整的 JSFiddle here ):
不想要的:
正如模型中的文字所说，请注意粉红色的“通知”横幅与黄色侧边栏重叠(margin 仅将文本踢回，而不是与它重叠的块元素的边缘)。我希望它看起来更像:
粉红色背景停在侧边栏的边缘。我能够通过设置通知横幅的宽度(因为我知道它会与侧边栏相交)在模型中完成此操作，但是如果该通知出现在页面下方，则它不会扩展到全宽。
是否有某种结构/样式可以让我完成这种外观，并且可以灵活地调整通知横幅在内容中的显示位置？
最佳答案
您可以简单地将 overflow: auto 添加到 stop its background from leaking behind the sidebar 的通知中，同时保留侧边栏的边距。
这样做的原因是因为 overflow 不是 visible 会干扰浮点数，因为它会创建一个新的块格式化上下文。通常，这会导致框与浮点数(及其边距，如果有)不相交。请记住，因此，如果通知框的任何部分与 float 相交，这将导致整个通知框及其内容被限制为较窄的宽度。您可以通过在周围段落和通知框本身中添加/移动文本来查看这一点(我无法用 fiddle 链接轻松演示这一点)。
规范中有这样的说法，在 section 9.4 中:
指向 section 9.5 :
虽然第二个引用在最后听起来令人生畏，但您在此处看到的行为非常一致，而不是您会开始看到实现偏差的边缘情况。
关于html - float 元素周围的边距？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18468923/