Question

我以为我理解了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;
}*/

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

enter image description here 为什么一切都很好没有 clearfix？

Answer 1

事实上，它似乎有效，但你所做的就是通过使用margin-left: 200px;来避免浮动元素（也是段落没有浮动， clearfix在所有之后清除浮动）。浮动元素虽然没有被清除。浮动元素现在在它自己的块格式化上下文中，而具有margin-left的段落在主上下文中。

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

Answer 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;
}

Answer 3

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

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

为什么没有clearfix呢？

3 个答案: