html - floatを使用すると、左のコンテンツがブロックから飛び出します

Question

jsbinでコードサンプルを作成しました。ここにあります

http://jsbin.com/apaqon/4/edit

私がやりたいのは、左右に2つのセットを作成することですが、ブロック要素でfloat leftを使用すると、メインブロックコンテナからジャンプします。

私のコードでは、leftBlockとrightBlockを白い背景の中に保ちたいと思っています。

誰かが私を助けてくれませんか

Answer 1

コードとデモについてはフィドルを参照してください

フィドル: http://jsfiddle.net/PBGyT/1/

デモ: http://jsfiddle.net/PBGyT/1/embedded/result/

css の 1 行だけに、overflow:hidden: を追加しました。#Block{margin: 0px 20px; overflow:hidden;}

スクリーンショットを参照してください：

Answer 2

スタイルのルールを確認してください。

class を定義しました.clearが、その class 属性を持つ html タグがありません。これは実際に要素をフロートさせるために必要です。次のようなものを追加すると

<p class="clear"></p> 

コンテンツ ブロックの div を閉じる直前に、左右のボックスの両方が白い背景で表示されます。