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

浮遊要素の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 は、浮動要素を含む要素の高さを決定するために使用されます。浮動要素はその親要素に高さを渡さないため、親要素のマージンなどに苦労するでしょう。あなたの例では、clearfixed 要素の下に要素がないため、clearfix は何もしていません。clearfix トリックと clear プロパティを混同していると思います。

詳細については、フロートの CSS トリックを確認してください: http://css-tricks.com/all-about-floats/

于 2013-12-30T14:25:47.883 に答える