CSS：浮動小数点のdivの高さは

Question

2つのdivを並べて別のdivの内側に配置しようとしているので、2列のテキストと外側のdivの両方で境界線を描くことができます：

HTML

<div id="outer"> 
    <div id="left"> 
     ... 
    <div id="right"> 
</div> 

CSS

#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
} 

#left{ 
    float:left; 
} 

#right{ 
    width:500px; 
    float:right; 
} 

はしかし、外側のdivが0PXの高さを登録し、その境界線が他のdivを中心に行っておりません。どのようにして外側のdivにその内側のものの高さを認識させるのですか？

Answer 1

浮動小数点数には高さがないため、浮動小数点数は親要素のサイズに影響しないためです。

あなたは親要素が考慮した浮動要素を取る作るためにoverflowスタイルを使用することができます。

#outer { overflow: auto; } 

Answer 2

clearプロパティが適用されている浮動要素の後に要素を挿入して、浮動小数点の子要素の高さを考慮しないため、浮動小数点要素の高さが0になるため、浮動小数点要素をクリアすることができます。

<div id="outer"> 
    <div id="left"> 
     ... 
    <div id="right"> 
    <div class="clear"></div> 
</div> 

#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
} 

#left{ 
    float:left; 
} 

#right{ 
    width:500px; 
    float:right; 
} 
.clear{ clear: both; } 

Answer 3

これを試してみてください：

<div id="outer"> 
    <div id="left"> 
     ... 
    <div id="right"> 
    <div style="clear:both"></div> 
</div> 

Answer 4

追加オーバーフローを：隠されました;メインディビジョンに

#outer: overflow: hidden; 

またはあなたは、クリアを追加浮かべdivタグの後に来る外側のdivにいくつかの非表示コンテンツを追加します：

<style type="text/css"> 
#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
overflow: hidden; 
border: 1px solid green; 
} 

#left{ 
    float:left; 
border: 1px solid red; 
} 

#right{ 
    width:500px; 
    float:right; 
border: 1px solid yellow; 
} 
</style> 

Answer 5

は、この問題に対する解決策のいくつかあり、両方のスタイルルールに。

through cssの：after擬似要素を追加して、これらのdivの後にコンテンツを挿入してクリアすることもできます。これは両方とも - 余分なマークアップを必要としないという利点があります。

私の好みは最初のものです。

Answer 6

また、外側のdivをフロートしなければなりません。 floatet divを含み、フローティングされていないDivが崩壊します。

#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
    float:left; 
} 

#left{ 
    float:left; 
    width:300px; 
} 

#right{ 
    width:500px; 
    float:right; 
} 

Answer 7

どのようにこのような試合：

<style type="text/css"> 
#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
    border:thin solid #000000; 
    height:300px; 
    margin:5px; 
    padding:10px; 
} 

#left{ 
    float:left; 
    border:thin dashed #000000; 
    width:385px; 
    height:100px; 
    margin:5px; 
} 

#right{ 
    width:385px; 
    float:left; 
    border:thin dashed #000000; 
    height:100px; 
    margin:5px; 
} 
</style> 

<div id="outer"> 
    <div id="left"> 
    </div> 
     ... 
    <div id="right"> 
</div> 
</div> 

Answer 8

親の内側のdivが、それは親のdivの一部ではなく浮いている場合：2つあり、あなたの問題を解決するために、親element.noを検査することによって、それをチェック方法： 1）は、それが.blankすべてのCSS

.blank:after{ 
     content: ""; 
     clear:both; 
     display:block; 
    } 

それとも 2）親にクラスを与え、次のように親クラス内の最後に空のdivを作ります。クリア修正し、それが親に内容