Question

我正在尝试设计一个所有元素都浮动的栏。我没有问题要做这个部分，但问题是，当我尝试在这个部分下添加一个新块时，我在这个新块中的第一个元素之前有一个空格，或者当我添加时我的两个块之间有一个空格clear: both;。

我已经尝试过使用新的clearfix hack，但它在我的情况下不起作用。

这是我制作的一个小型编码器，用于向您展示我遇到的问题：http://codepen.io/anon/pen/piDEK。我想避免在我的两个块之间留一个空格，而我的h1应该在左边（而不是在我的ul之后，你可以尝试删除我的代码集中的clear），显然。

感谢您的帮助。

Answer 1

您可以随时将overflow:hidden;添加到#topbar（和/或#content），然后删除单独的空白div，以便修改后的CSS为：

#top-bar {
    width: 100%;
    height: 65px;
    /* border: 1px solid #e6e6e6; */
    padding: 0 25px;
    background: green;
    overflow:hidden;
}

overflow:hidden的目的不是清除浮动本身，而是通过建立新的block formatting context（BFC）流根控制子内容包含，BFC的一个特征是浮动包含。

More on BFCs from MDN

块格式化上下文是a的可视CSS呈现的一部分   网页。它是块框布局的区域   并且漂浮物彼此相互作用。

块格式化上下文包含元素内的所有内容   创建它也不是在创建的后代元素内   一个新的块格式化上下文。

块格式化上下文对于定位非常重要（请参阅   漂浮物）和清除浮体（见清楚）。定位规则   并且清除浮动仅适用于同一块内的事物   格式化上下文浮点数不会影响其他事物的布局   阻止格式化上下文，并清除只清除过去的浮动   相同的块格式化上下文。

Answer 2

您可以通过在父元素上提供float来清除overflow:hidden;。检查 DEMO 。

与您的案例类似，请使用section元素。

section{overflow:hidden;}

Answer 3

在关闭作为浮动子项的每个父元素之前使用clear。

使用

<div class="clear"></div>

＆安培; CSS

.clear{clear:both;}

我在li＆amp;之后的ul之后使用了这个。在.top-bar div。

之后

修改

两个div之间的白线是由于#top-bar #left-menu li元素的行高超过父高度使用，

#top-bar #left-menu li {line-height:63px;}

这是修改过的codepen，例如DEMO

Answer 4

只需在clearfix DIV的样式中添加display:none即可删除不需要的空格。

<div style="clear: both; display:none"></div>

您的网站上很可能会有多个这样的内容，因此我建议您使用类而不是内联样式。

适当清除浮动元素

4 个答案: