Question

小提琴

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

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

修改（解决方案）：

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

HTML个元素中的空格会导致出现意外行为：

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

Answer 1

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

将clear: both;添加到.sample_section以修复此问题。

Answer 2

将display: inline-block;提供给.features-section而不是float:left

.features-section{
   display: inline-block; /* remove float: left */
   --------
}

Answer 3

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

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

.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内的内容在浮动下方开始一个新行。 / p>

因此，边界包含内容的固有高度和浮动元素产生的高度间隙高度。

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

布局显示浮动元素周围的意外边框

3 个答案: