html - Div 向左浮动，Div 容器不增加大小

Question

我想在一个容器 div 中制作两个 div，一个向左浮动，一个向右浮动。左侧 div 包含新闻日期、标题和新闻内容，右侧 div 包含一个下拉按钮和框，其中包含与新闻帖子相关的媒体。

这是

问题是newsleft和newsright是浮动的，并且页面内容没有增加它的高度，我不想手动将高度放在CSS文档中：S有没有人可以帮助我？

谢谢，o0 Will Ryan

Answer 1

浮动元素从常规流中移除。因此，父容器无法计算内容的高度。为了解决这个问题，我们需要清除浮动，这实际上意味着它将被放回流程中。

Nicholas Gallagher 做了一个巧妙的 clearfix 小技巧。基本上，您只需将类添加到父元素，所有包含的浮点数都将被清除。

http://nicolasgallagher.com/micro-clearfix-hack/

 /**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Answer 2

将溢出设置为隐藏在包含 div 的样式中，然后容器将增加其大小以适合子项。