クリアする方法：両方;正しく？

Question

<style> 
.cl {clear:both;} 
.block {} 
.left {float:left;} 
</style> 

<div class="block"> 
    <div class="left">Title 1</div> 
    <div class="left">Value 1</div> 
    <div class="cl"></div> 
</div> 
<div class="block"> 
    <div class="left">Title 2</div> 
    <div class="left">Value 2</div> 
    <div class="cl"></div> 
</div> 

.blockの末尾に<div class="cl"></div>を追加することは避けられますか？

Answer 1

.blockでoverflow:hiddenを試してみることがありますが、時々修正されることがあります。

<style> 
    br {clear:both;} 
</style> 
<div class="block"> 
    <div class="left">Title 2</div> 
    <div class="left">Value 2</div> 
</div> 
<br/> 

番目のオプションの再：あなたがこれを行うことができ

Answer 2

@animusonコメント

<style> 
    .container br {clear:both;} 
</style> 
<div class="container"> 
    <div class="block"> 
     <div class="left">Title 2</div> 
     <div class="left">Value 2</div> 
    </div> 
    <br/> 
</div> 

Answer 3

をこの問題には、2つの共通ソリューションがあります。

1. 浮上要素（したがって、この場合、.block）の親にoverflow: hiddenを加えます。
2. 使用 "clearfix"：ここhttp://nicolasgallagher.com/micro-clearfix-hack/

いくつかのより多くの情報：あなたすでにはそれを追加するために利用可能な要素を持っている場合Is clearfix deprecated?

---

clear: bothを使用するには良い時期です。例えば

、フッターと浮かん列の一般的なケース：http://jsfiddle.net/thirtydot/vhBkM/

Answer 4

あなたは全く<div class="cl"></div> divを必要はありません。ブロックdivにclear: bothを置くだけです。

例：http://jsfiddle.net/mKazr/

CSS

.block { 
    clear: both; 
    overflow: hidden; /* If you want to make the div size to the contents and not collapse use this line (from thirtydot answer) */ 
} 
.left { float:left; } 

HTML

<div class="block"> 
    <div class="left">Title 1</div> 
    <div class="left">Value 1</div> 
</div> 
<div class="block"> 
    <div class="left">Title 2</div> 
    <div class="left">Value 2</div> 
</div> 

編集：{クリア：両方}の後に：追加されたコード