web-dev-qa-db-ja.com

CSS：フロートセットに高さが含まれていないDIV

このコードがあると仮定します。

<div id='upperDiv' style='min-height:200px;border: 1px solid #000000;'>
     <div id='rightDiv' style='float:right;width:75%;'>
       content1
     </div>  
     <div id='leftDiv' style='float:left;width:25%;'>
       content2
     </div>
</div>
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'>
   content3
</div>

RightDivとleftDivのコンテンツが200pxの高さ（最小の高さ）を超えると、upperDivは拡大しないため、そのコンテンツは下位のdivとオーバーラップします。大きなコンテンツのfloat属性を削除すると、それが大きくなり、問題が発生します。しかし、どのDiv（rightDivまたはleftDiv）が200pxの高さを通過するかはわかりません。どうすればこれを修正できますか？

ありがとう

csshtmlheightoverlap
19
RYN

セットする #upperDiv次のいずれか：

overflow: hidden;
width: 100%;

または

float: left;
width: 100%;

または、このようなCSS疑似要素（IE8 +互換）を使用してルールを作成します

#upperDiv:after {
  content: "";
  display: table;
  clear: both;
}

最良の解決策
次のような再利用可能なクラスルールを作成します。

.group:after {
  content: "";
  display: table;
  clear: both;
}

これで、これと同じ機能を必要とするすべてのものに適用できます。例えば...

<div id='upperDiv' class="group" ... >

P.S. IE 6/7の互換性が必要な場合は、チェックアウト この投稿 。

44
jessegavin

フロートは段落内の画像（複数の段落が画像を折り返すことができる）などのために設計されているため、これは意図的なものです。

Complex Spiralには より完全な説明 理由があり、Ed Elliotはいくつかの コンテナをフロートの周りに拡張させるアプローチ について説明しています。 overflow: hiddenアプローチはほとんどの状況で最適に機能することがわかりました。

8
Quentin

後

 <div id='leftDiv' style='float:left;width:25%;'>
   content2
 </div>

追加

     <div style="clear:both"></div>

それはあなたの問題を解決します。

7
PJunior