2

小提琴

http://jsfiddle.net/cZH7F/1/

为什么.sample-section's 的边框会影响这个包含前一个元素中包含的浮动元素的大区域？

编辑（解决方案）：

所以，对于未来的访客，我将总结我今天在这里学到的东西

can 元素中的空格HTML会导致意外行为：

CSS 属性display: inline-block可以替代float

4

3 回答 3

1

给予display: inline-block;而.features-section不是float:left

.features-section{
   display: inline-block; /* remove float: left */
   --------
}
于 2013-04-24T12:31:34.750 回答
1

视觉问题的出现是因为浮动元素产生了很大的间隙。

您可以使用以下规则修复它：

.start-page-upper{
    overflow: auto;
}

向各个部分添加轮廓是说明性的，因此请查看布局的格式，请参阅：http: //jsfiddle.net/audetwebdesign/cZH7F/3/

为什么浮动会导致这种情况？

正如https://stackoverflow.com/a/16192105/564353所指出的，.start_page_upper由于它的子元素是浮动的，因此它的高度崩溃为零（因此不会影响包含块的高度）。下面的流入元素是.sample_section并且在零高度之后开始.start_page_upper，因此是页面的顶部。

但是，浏览器必须为浮动元素提供空间（称为间隙），并且由于浮动元素填满了页面宽度，它们会强制其中的内容在.sample-section浮动下方开始新的一行。

结果，边框包围了内容的固有高度和浮动元素生成的高度间隙高度。

触发了一种不同的overflow: auto格式化模式来解决这个问题。（不重新阅读 w3.org 文档，我认为这overflow: auto意味着在计算包含块的高度时要考虑溢出内容的高度，并且浮动内容正在溢出。）

于 2013-04-24T12:58:29.363 回答
1

这是因为.sample_section开始的高度与 相同.start_page_upper，因为它div没有高度，因为它的所有元素都是floating。

添加clear: both;到.sample_section修复它。

于 2013-04-24T12:30:15.953 回答