Question

每当div向左或向右浮动时，它就从容器div溢出。如果删除了float属性，div将装入容器div中。怎么会发生这种情况？请告诉我。请参考我在http://jsfiddle.net/ZtJZS/的jsfiddle。愚蠢的是我的代码： -

<div class="main">
<div class="left-content">
    This is an example content<br />
    This is an example content<br />
    This is an example content<br />

 </div>
 </div>

css代码可以在我的小提琴中找到... 提前谢谢。

Answer 1

您需要的是CSS clear fix。它将清除包含div的高度。

将以下内容添加到样式表中：

/**
 * 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;
}

并将cf类添加到包含div。

这是一个例子 jsFiddle 。

Answer 2

这就是它与浮动项目一起使用的方式 - 父项目的高度浮动内容“不计算”。要解决它，你必须选择一些选项：

使.main div也浮动，因为它可以在this version of your fiddle中看到。但是，这可能不适合您的布局。
使用overflow:auto使外部div跨越内部div。这里描述的“新解决方案”非常有效：http://www.quirksmode.org/css/clearing.html这就是looks in your fiddle。

Answer 3

你可以添加overflow：hidden;你的主要风格。这将使你的铸币工人流连忘返。见http://jsfiddle.net/ZtJZS/4/

div.main{
   width:90%;
   padding:15px;
   border:1px solid #000;
   overflow: hidden
}

为样式添加高度，如果要限制其垂直条纹并添加垂直滚动条以使容器可滚动

Answer 4

你也可以把div放在主div的末尾，它会做你想做的事情

<div class="main">
<div class="left-content">
    This is an example content<br />
    This is an example content<br />
    This is an example content<br />

 </div>
<div style="clear:both"></div>
</div>

浮动的div不会进入内部div

4 个答案: