布局显示意想不到的边框浮动元素

小提琴布局显示意想不到的边框浮动元素

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

为什么.sample-section的边界影响的大片地区，包括封闭在一个元素浮动元素？

编辑（解决方案）：

因此，对于未来的游客，我会总结一下我今天

这里学到在 HTML CAN元素

的空格导致行为意外：

CSS属性display: inline-block可以为float

来源

2013-04-24 Sprottenwels

您小提琴中的CSS有一些语法错误在它里面，你似乎在彼此内部嵌套了样式。我们应该先解决。 – 2013-04-24 12:38:02

@MarcAudet 我不知道我是否理解你。也许你的意思是scss语法？：x – Sprottenwels 2013-04-24 12:46:22

我不使用scss（还），所以我可能误解了语法。但是，小提琴可能不会理解scss。我的道歉，没有意图的罪行。我确实调整了CSS，它给出了相同的结果，所以这从来都不是问题。不过，我确实为您发布了修复程序。 – 2013-04-24 13:01:21

给display: inline-block;到.features-section代替float:left

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

来源

2013-04-24 12:31:34

非常感谢。如果你能向我解释为什么这样工作，我会非常感激 – Sprottenwels 2013-04-24 12:33:09

@Sprottenwels正如Chowlett解释的那样，这只是增加高度而不是浮动元素。 – 2013-04-24 12:34:15

如果我使用'display：inline-block'，我也会将它应用到'.first-section'，因为'.first-section'的内容可能比'.features-section'的内容更长。 @Mr_Green提出了一个不使用浮点数的解决方案，可能是这个应用程序中更好的选择，因为它似乎是在创建一个两列格式。 – 2013-04-24 13:11:44

这是一个另类，因为.sample_section启动t的高度与.start_page_upper相同，因为div没有高度，因为它的所有元素都是float ing。

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

来源

2013-04-24 12:30:15 Chowlett

这也适用。但是，布局中始终存在'.sample_section'。例如，如果您的布局是带有可配置小部件的CMS（假设为WordPress）的一部分，那么具有clear特性的部分可能是可选的，您最好使用'overflow：auto'属性。然而，这个评论超出了原始问题的范围，但值得记住的应该是下一个大的WordPress的克隆。 – 2013-04-24 13:16:59

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

您可以使用下面的规则解决它：

.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-24 12:58:29

布局显示意想不到的边框浮动元素

回答

相关问题