1

我以为我了解 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 一切都很好？

4

3 回答 3

2

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

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

于 2013-12-30T14:14:42.893 回答
2

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;
}
于 2013-12-30T14:17:28.110 回答
1

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

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

于 2013-12-30T14:25:47.883 回答