为什么没有clearfix它可以工作？答案

【问题标题】：Why does it work without clearfix?为什么没有clearfix它可以工作？
【发布时间】：2014-01-17 10:33:08
【问题描述】：

我以为我了解 clearfix 的用途。但它可以按需要没有 clearfix。这是为什么呢？

这是我的 HTML：

<body>
<div class="clearfix">
    <h1>Title</h1>
    <h2>Headline 1 with a very long title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h2>Headline 1 with a very long title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h2>Headline 2</h2>
        <ul>
            <li>bullet 1</li>
            <li>bullet 2</li>
        </ul>
    </div>
</body>

还有 CSS：

* {
    /* basic resets */
    margin: 0px;
    padding: 0px;
    /* font stuff */
    font-family: Cambria;
    font-size: 18px;
    line-height: 24px;
    border-color: black;
}

body, html {
    margin: auto;
    max-width: 700px;
}

p {
    margin-left: 200px;
    margin-bottom: 18px;
}

h1 {
    margin-left: 200px;
}

h2 {
    max-width: 150px;
    margin-left: 50px;
    margin-left: 0px;
    float: left;
}

ul {
    margin-left: 200px;
}

/*.clearfix {
    overflow: auto;
    zoom: 1;
}*/

这就是我得到的（这是我想要的）：

为什么没有 clearfix 一切都很好？

【问题讨论】：

你认为 clearfix 是干什么用的？

标签： html css clearfix

【解决方案1】：

clearfix 用于保持浮动元素的空间。

由于您已经有其他元素，例如 <p> 没有 float 属性的标签，因此它们保留了空间。

在这里查看http://jsfiddle.net/NJEa5/2/

我去掉最后一个ul元素，那么浮动元素就不会占用容器内的空间了。

但是使用 clearfix 它可以保留空间 http://jsfiddle.net/NJEa5/3/

然后，如果您想保留左侧的那些元素，即使带有短 p 标签，您也可以清除之前的浮动：http://jsfiddle.net/NJEa5/10/

h2 {
  float: left;
  clear:left;
}

【讨论】：

你是对的 --- 但是当我按照 Adonis K. 所说的去做时，例如只做一个<p> 1 行，然后发生这种情况并中断：jsfiddle.net/NJEa5/5
当然，正如我所说的 p 标签保持他的空间和浮动元素在容器上的空间之外......所以在你的例子中你正在做的仍然是向左浮动元素。因为 p 标签的高度不大，所以下一个浮动元素会放在前一个浮动元素的旁边......明确jsfiddle.net/NJEa5/9
哦，哦，哦。我知道了。正如 clear 修复建议的那样，我什至没有 clear。非常感谢。
没问题的朋友很高兴帮助你理解。尝试访问 Tosh 在他的答案中提供的链接是一个很好的开始@Tobias

【解决方案2】：

Clearfix 用于确定包含浮动元素的元素的高度。浮动的元素不会将高度传递给它的父元素，因此您会发现自己在父元素的边距等方面遇到困难。在您的示例中， clearfix 没有做任何事情，因为您在 clearfixed 元素下方没有任何元素。我认为您将 clearfix 技巧与 clear 属性混淆了。

查看浮动的 css 技巧以了解更多信息： http://css-tricks.com/all-about-floats/

【讨论】：

【解决方案3】：

确实，它似乎有效，但您所做的只是使用margin-left: 200px; 避免浮动元素（段落也不是浮动的，clearfix 毕竟清除浮动）。浮动元素虽然没有被清除。浮动元素现在位于它自己的块格式上下文中，而左边距的段落位于主上下文中。

如果您转到任何段落并将其文本设置为 1-2 个字符（1 行），您会注意到它中断了。

【讨论】：

啊，我被骗了？如果我删除margin-left: 200px;，它就不再起作用了，即使是.clearfix。
我做到了并更新了 Danko 的 jsfiddle，但发生了这种情况：jsfiddle.net/NJEa5/5
@Tobias 您需要将 2 个浮动元素包装在一个新元素 (div) 中，然后在其中添加类 clearfix
哦不，这是我想要避免的，因为我的 HTML 的来源是一个降价文档。我将发布一个单独的问题。我不能使用浮动技巧然后......
你不需要那个包装元素，只需要清除左边