0

やあみんなはhtmlとcssフロートのものでいくつかの助けが必要です。http://jsfiddle.net/anilnamde/DVJ4b/を確認してください。以下は、私が持っているクエリです。以下のコードも含む

    .p{
    background:red;
    width:100%;
    padding:20px;

}

.p div{
    width:49%;
    background:blue;
    float:left;
    margin-left:5px;
    min-height: 200px;
}
</style>
<body>
<div class="p">
    <div>
        first
    </div>    
    <div>second
    </div>
    This is the test text
</div>
<p>This is good</p>
</body>
  1. 私の理解によると、親div内のpタグとテキストは、2つのfloat要素の後ろに配置する必要があります。それは起こっていません。
  2. ここでも、何とかしてclearfixがないか、両方をクリアするか、非表示の親divの高さがオーバーフローして正しいように見えます。これは理解しづらいものです。

誰かが私がこれを理解するのを手伝ってもらえますか？

私が始めた通り、フロート関連の問題を理解するための標準的な例を理解し、それを修正するためにclearfixを適用しました。しかし、突然、clearfixなしで正常に動作し始めたことがわかりました。ですから、私は現在、フロートの理解についてはよくわかりません。

4

5 に答える 5

1

  1. .p内のテキストは、フロートされたdivを適切に折り返していますが、側面にそれを行う余地がないため、下にあります。pタグのテキストはdiv.pの外にあるため、下に表示されます。繰り返しますが、これは予想されます。Div.pはブロックレベルの要素であるため、明示的に指定しなくても全幅になります。

  2. 親divが展開され、フロートされたdivの下に折り返されているテキストが折り返されます。これは予想されます。

于 2013-01-30T04:01:10.123 に答える
0

与えられた例は本当に良くありません。2つのフロート要素があり、これらを合わせると使用可能な幅のほぼ100％を占め、「p」タグをその周りに「フロート」するスペースがなくなります。したがって、何が起こっているのかというと、「これはテストテキストです」というテキストが実際には「浮いているdivの周り」と「下」に浮かんでいます（このテキストをapタグでラップし、を使用して背景色を適用するだけで、次のように表示され.p p { background-color: gray; }ます。 ）。これはあなたの最初のステートメント（

...これは起こっていません。

）それが起こっているので、間違っています。

問題は、これらのフロートされたボックスの右側にテキストをフロートさせるスペースがないため、テキスト自体がクリアフィックスのように機能していることです。

ここで、「これはテストテキストです」というテキストを削除すると、明確な修正が必要になります。赤い背景が上に縮小し、期待どおりに機能し、明確な修正を求めているためです。

別のことを試してみませんか？「これはテストテキストです」を元の場所に戻し、それらのフロートボックスの幅を51％に変更して、驚いてください。

ここで自分自身を「明確」にしたことを願っています。;）

于 2013-01-30T04:09:28.920 に答える
0

この動作は、div内にテキストがあり、.pどこかに移動する必要があるためです。200pxの高さを占めるフローティング要素を考慮して、それを合わせるのに最適な場所はそれらの下にあり、したがって.pdivを伸ばします。

div内からテキストを削除すると（「これはテストテキストです」）、 divの高さがはるかに小さい.pことがわかります。.pこれで、高さはパディングによって発生します。これをclearfixまたはで修正する必要がありますoverflow: hidden。

于 2013-01-30T04:00:24.807 に答える
0

最後にフロートされたdivの後のテキストは、「clearfix」として機能し、下の赤いボックスを「プル」します。

http://jsfiddle.net/DVJ4b/1/

タグテキストが赤いボックスの下に表示される理由は<p>、外側のdivがフロートされていないためです。

コンテンツの前にフロートがある場合、フロートはそれらとオーバーラップしません。フロートは依然としてフローコンテンツの一部です。それは単にポジショニングと関係があります：

http://jsfiddle.net/DVJ4b/4/

絶対ポジショニングと混同されているのではないかと思います。

于 2013-01-30T04:02:05.493 に答える
0

これが私の解決策ですhttp://jsfiddle.net/burn123/DVJ4b/5/

変更の概要

  • に記事を追加しましたThis is the test test
  • clear:both;常にフロートオブジェクトの下に表示されるように記事に追加されました。
  • オーバーフローが発生しないように、box-sizingプロパティをに設定します。border-boxこれにより、要素を設定して、要素に与える幅や高さに関係なく、その幅に追従するようにします。
  • 575pxの前に浮くようにレスポンシブ要素を追加し、それよりも小さい場合は幅を100％に設定します。これはオプションです

これは、必要に応じてレイアウトを改善する方法にすぎません。

于 2013-01-30T04:15:01.763 に答える