添加CSS填充/边距到Divs

Question

我正试图将padding: 16px 0;放在彼此左边漂浮的3个div上，但我在如何操作方面遇到了困难。

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

border-bottom: medium double red;应该比第一部分小部件低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个像素的高度。在那里添加一个清晰使它如此工作，就像你期望的那样。类似于许多重置样式表实现的clearfix。

[编辑因为我们不喜欢纯链接答案]

HTML

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

CSS

.clr {
  clear:both; 
}