Div Floats Left，Div Container不增加尺寸

Question

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

这是

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

谢谢，哦Ryan

Answer 1

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

尼古拉斯·加拉格尔（Nicholas Gallagher）做了一个整洁的小修正技巧。基本上，您只需将该类添加到父元素，并且将清除所有包含浮点数。

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

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