フローティング時の奇妙なdiv境界問題

Question

なぜこのコードが結果を生成するのか説明してください。可能であれば、それを修正する方法/それを回避する方法。

右にある 'div div'の上にdiv 'z'と 'q'を移動しません。

それとも

私はdivの「X」から「z」と「Q」でconsitantとも同様に青の右に国境を越えて行くようにしたいと思います。

<div style='margin: 5px;width: 653px;border: blue 1px solid;float: left;'> 
    <div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>z</div> 
    <div style='overflow: hidden;margin: 0px; margin-bottom: 5px;width: 100%;border: red 0px solid;/*float: left;*/'> 
      <div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: left;'>y</div> 
      <div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: right;'>x</div> 
    </div> 
    <div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>q</div> 

Answer 1

スクリーンショットを作成したブラウザはありますか？それがIEの場合、100％幅を計算するときに境界幅が無視されるボックスモデルに問題があります。

内側のdivのサイズを変更するための目に見えないコンテナを作成するか、内側のdivのサイズをcontainer.width -2に設定します。

また、の幅：100％を削除してみます。 divのから

Answer 2

赤枠はあなたのイメージで青い枠の内側に実際にある - 私はあなたをzとqコンテナのマージンを大きくするとし...

私はしました属性を二重引用符で囲み、再宣言されたスタイルルール（マージンとマージンボトム）を修正する自由を取った - しかし、行フォーマットのための謝罪 - 私はそれをすべて内部に残すことはできなかった私が改行を取るまでこのフォーラムのコードブロック：

<div style="margin: 5px;width: 653px;border: blue 1px solid;float: left;"><div style="margin: 5px;width: 100%;border: red 1px solid;">z</div><div style="overflow: hidden;margin: 5px;width: 100%;border: red 0px solid;"><div style="margin: 0px;width: 300px;border: red 1px solid;float: left;">y</div><div style="margin: 0px;width: 300px;border: red 1px solid;float: right;">x</div></div><div style="margin: 5px;width: 100%;border: red 1px solid;">q</div> 

Answer 3

このシナリオでは、設計が機能している可能性がありますが、フローティング要素をクリアして処理していないため、非常に簡単に破損する可能性があります。

私が作成した例を参照することができます。このような種類の問題に対しては、実用的なフィーリングが作成されています。

http://jsfiddle.net/mayankipsa/e7snvdag/

.floatLeft { float: left;} 
 
.floatRight { float: right;} 
 
.clearBOTH { clear: both; } 
 

 
.redBorder{border:1px solid red;} 
 
.blueBorder{border:1px solid blue;} 
 

 
.x,.y{width:49%;margin:1px; } 
 
.z{margin:1px;} 
 
.q{margin:1px;}

<div style='margin: 5px;width: 653px;border: blue 1px solid;float: left;'> 
 
    <div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>z</div> 
 
    <div style='overflow: hidden;margin: 0px; margin-bottom: 5px;width: 100%;border: red 0px solid;/*float: left;*/'> 
 
      <div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: left;'>y</div> 
 
      <div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: right;'>x</div> 
 
    </div> 
 
    <div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>q</div> 
 
</div> 
 

 
<div class="clearBOTH"></div> 
 
<div class="blueBorder" style="margin-top:50px;"> 
 
    <div class="z redBorder">z</div> 
 
    <div class="redBorder"> 
 
     <div class="y floatLeft redBorder">y</div> 
 
     <div class="x floatRight redBorder">x</div> 
 
     <div class="clearBOTH"></div> 
 
    </div> 
 
    <div class="q redBorder">q</div> 
 
</div>