html - 将 CSS 填充/边距添加到 Div

Question

我正在尝试将padding: 16px 0; 3 个 div 放在彼此左侧浮动，但我很难做到这一点。

示例： http ://codepen.io/anon/pen/ifpAs

border-bottom: medium double red;应该在 section-one-widgets 下方 16px 。

为什么这不起作用，有没有办法做到这一点而不针对特定的 div ID，例如 #search、#logo、#social 等，因为以后可能会放置更多小部件？

谢谢你。

Answer 1

#section-one:after {
  content: "";
  clear: both;
  display: block;
}

Answer 2

http://codepen.io/anon/pen/eqJBg

由于所有三个内部 div 都是浮动的，因此它们会从布局中移除，并且您的容器 div 只会获得 16 像素的高度。在其中添加一个 clear 使其可以按您的预期工作。类似于由许多重置样式表实现的 clearfix。

[编辑，因为我们不喜欢仅链接的答案]

HTML

<div id="section-one">
    ...
    <div class="clr"></div>
</div> <!--end #section-one-->

CSS

.clr {
  clear:both; 
}