クリアコンフィギュレーション技術のほとんどは、親コンテナの一番下に物を追加することを含み、私は擬似要素アプローチを好む不要な要素をHTMLに追加します。HTML/CSS:不必要なタグを追加せずに途中のフローティング要素をクリアする
しかし、最近私はいくつかの子供が浮かんでいるがすべてではない容器を扱っていることがわかりました。最初の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を参照してください。
回答ありがとうございます。すべてがすばらしく明白な回答ですが、それ以上の情報があるので私はあなたを受け入れます。そして男の子の少年私はそのような明らかな解決策を見ないようにとても愚かだった...ちょうどフロートをクリアするために来るものを使用してください!余談ですが、複数の要素が左右に交互に浮かぶ場合、同じ行にすべての行を挟む代わりに、それぞれの浮動小数点で新しい行を開始するように指示することはありますか?それらに幅を設定しないでください。 –
@Xavier_Ex私もフロートのビットをカバーする答え[ここ](http://stackoverflow.com/a/12871734/1542290)を持っています;)とあなたは大歓迎です... –
@Xavier_Exとあなたの質問のために、変更DOM、それはラッパー要素の浮動要素を包むための良い習慣であり、私の答えhttp:// jsfiddleで既に提案した 'clear'クラスを使用します。net/dJxD4/9/ –