CSS Floatはレイアウトを中断させます

-1

次のHTML：http://pastebin.com/zBkzGyswをテキストエディタにコピーしてブラウザでテストすると、黄色いボックスの高さが大きくなります！これは、それがclearfixのクラスを持ち、左側のサイドバーから自分自身をクリアしているためです。CSS Floatはレイアウトを中断させます

どうしたらいいですか？

私はoverflow:hidden;をミドルコラムで使用しようとしましたが、それは長いコンテンツを持つテーブルを持っていると切断されることを意味します。また、これを行うときに、margin-leftの右側に余白を追加するのはなぜですか？

出典

2011-09-09 Cameron

：http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best –

いやその記事は私がどのように求めている浮かべ要素をクリアする方法を説明しますオーバーフローを隠蔽したくないときにオーバーフローを処理し、ユーザーがオーバーフローすることはありません。 – Cameron

あなたMiddleのdivにdisplay: inline-block;を適用してみてください。

.Middle 
{ 
    margin-left: 220px; 
    display: inline-block; 
}

はまた、あなたが後にしているレイアウトを取得するだけでなく、それにwidthを指定する必要があります。

アップデート：私は私はあなたが後にしていると思うのレイアウト動作を取得する方法を見つけたが、私はclearfixのスタイルをストリッピングすることにより、それをやった

。これはもっと近いですか？

役立つかもしれない

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
     body 
     { 
      margin:0; 
      padding:0; 
     } 
     .MainContent 
     { 
      margin: 20px; 
      width:200px; 
     } 
     .Middle 
     { 
      margin-left: 220px; 
      margin-top: -300px; 
      vertical-align: top; 
      float: left; 
     } 
     */ 
     </style> 
    </head> 
    <body> 

     <div class="MainContent clearfix"> 

      <div style="width:200px;float:left;"> 

       <div style="height:300px;background:blue;"></div> 

      </div> 

      <div class="Middle"> 

       <div style="padding:20px;background:red;"> 

        <div style="padding:10px;background:yellow;margin-bottom:20px;height:20px;"> 
         <div style="float:left;height:20px;width:300px;background:green;"></div> 
         <div style="float:right;height:20px;width:300px;background:green;"></div> 
        </div> 

        <table style="border:#000 1px solid;"> 
         <tr> 
          <td>ioruturiotueorit eiortueriotuoeotigggggggggggggggggggggggggggggggggggggggggggggggggggggggieruter tiouriotueroutoerutiuerteorituero tuioerutioeriotueroutoeruto eroturoetuoerutqe;ruqe; rty80yuto;eqotouyt4uyity 4iltyilytilryterutyertuyertuyert erut uerytierutyerutylerytelryltylert qerytuiertyileqrtyuqet</td> 
          <td>ioruturiotueorit eiortueriotuoeotiieruter tiouriotueroutoerutiuerteorituero tuioerutioeriotueroutoeruto eroturoeteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeuoerutqe;ruqe; rty80yuto;eqotouyt4uyity 4iltyilytilryterutyertuyertuyert erut uerytierutyerutylerytelryltylert qerytuiertyileqrtyuqet</td> 
          <td>ioruturiotueorit eiortueriotuoeotiieruter tiouriotueroutoerutiuerteorituero tuioerutioeriotueroutoeruto eroturoetuoerutqe;ruqe; rty80yuto;eqotouyt4uyity 4iltyilytilryterutyertuyertuyert erut uerytierutyerutylerytelryltylert qerytuiertyileqrtyuqet</td> 
         </tr> 
        </table> 

       </div> 

      </div> 

     </div> 

    </body> 
</html>

出典

2011-09-09 14:45:44 Andrew

それはちょうど私の中間の列が私のサイドバーをクリアするようになります。 – Cameron

OK、私は理解すると思います。コンテンツが本当に広い場合はどうしたらよいでしょうか？ミドル（赤いボックス）を右に広げて、幅広いコンテンツを囲みますか？ – Andrew

それは、左のコンテナからそれをクリアするために必要なオーバーフロー隠蔽が適用されている場合、明らかに不可能です。オーバフローオートは、この場合、パネルをもう一度スクロール可能にして、回避しようとしているもののいずれかとして機能しません。 – Cameron

CSS Floatはレイアウトを中断させます

答えて

関連する問題