6

clearfix 手法のほとんどは、親コンテナーの一番下に何かを追加することを伴いますが、不要な要素を HTML に追加しないので、私は疑似要素アプローチを最も好みます。

しかし、最近、すべてではなく一部の子がフローティングしているコンテナを扱っていることがわかりました。最初の 2 つの子は、最初のフロートが左に、2 番目のフロートが右にあるとします。2 番目の要素の直後に float をクリアする方法が必要なので、以下のコンテンツがそれらの間に挟まれないようにします。clearfix要素を追加せずに、途中でフローティング要素をクリアする方法はありますか?

以下に例を示します。

HTML

<div class="container">
    <div class="child">
        first child!
    </div>
    <div class="child">
        second child!
    </div>
    <div class="child">
        third child!
    </div>      
</div>

CSS

.container {
    width: 200px;
}

.child:nth-child(1) {
    float: left;
    background: yellow;
}

.child:nth-child(2) {
    float: right;
    background: red;
}

.child:nth-child(3) {
    background: blue;
    color: white;
}

このjsfiddleを見て、私が今持っているものを確認してください。

4

3 に答える 3

0

clear:both を追加します。3 番目の子で次のことができます。

.child:nth-child(3) {
    background: blue;
    color: white;
    clear:both;
}
于 2013-11-20T17:09:20.983 に答える
0

clear プロパティを使用する必要があります。

あなたの例：

.child:nth-child(3) {
    clear: both;
}

jsfiddleで。

于 2013-11-20T17:10:31.830 に答える