3

背景色が緑色のコンテナがあります。その緑<div>の中に、<div>黒でボックス（50px x 50px）のスタイルのaがあります-これ<div>は左に浮かんでいます。

<p>ここで、グレーの後にマークアップを追加すると<div>、グレーの周りに浮かぶと思い<div>ます。そして、そうです。しかし、私が代用するとき

ボックス（高さと幅を設定）のスタイルの別の<div>ものでは、それはもう浮かんでいませんが、浮いているdivの後ろに消えます。

正しく浮かんでいる最初の段落があり、次にdiv（ボックス）を追加した場合でも、段落は浮かんで止まり、別の行に表示されます。

HTML：

<div id="greencontainer">
    <div id="blackbox"></div> <!--this one is float:left;-->
    <p>A paragraph that floats around the previous div</p>

    <div id="anotherbox"></div> <!-- if I add another div with set width and height, it disappears behind the floated one, and even prevents the paragraph from floating around.-->
</div>

CSS：

#blackbox {
    width:50px;
    height:50px;
    background-color:black;
    float:left;
}

#p {
    margin:0px;
    padding:0px;
}

#anotherbox {
    width:50px;
    height:50px;
    background-color:grey;
}
4

3 に答える 3

3

実際に<p>は、ブロック ボックスである 自体の一部も、最初の の後ろに隠れています<div>。これは、ボックスがフローティングされていないため、最初のボックスが存在しないかのよう<div>に通常のフローに配置されているためです。ボックスをフローティングすると、通常のフローから外れるからです。

あなた<p>にはインライン コンテンツ (そのテキスト) が含まれていますが、<div>インライン コンテンツはそのように作成されているため、そのインライン コンテンツは最初の の周りを流れることができます。そのため、画像を左右に揃えることができ、画像が邪魔にならずにテキストをその周りに流すことができます。

あなたの 2 番目の は、あなた<div>の のように<p>フロートされていないので、最初の がそこになかったかのように通常の流れで配置されています<div>。どちらも同じ寸法なので、片方がもう一方の後ろに完全に隠れているように見えます。

コードでは、 の<div>後に2 番目の文字列がある<p>ため、テキストには影響しません。ただし、の前に追加するつもりだった場合<p>：

<div id="greencontainer">
    <div id="blackbox"></div>
    <div id="anotherbox"></div>
    <p>A paragraph that floats around the previous div</p>
</div>

次に、上記の説明を読むと、最初のテキストの周りにテキストが流れなく<div>なる理由が明らかになります<div>。あなたを押し下げているのは、その2番目の要素です<p>。

于 2012-11-24T02:48:17.163 に答える
2

非フローティング div は、フローティング ディビジョンをネイティブにラップしません。フロートされたコンテナの横にある場合に正しく流れるようmargin-left: 50pxに、 div に追加する必要があります。これが最善の解決策かどうかはわかりませんが、div が常にフローティング div の横にあるanotherboxことがわかっている場合は、通常はうまく機能します。横にない場合は、自動的になくても正しく流れます。

このフィドルをチェックしてください。

http://jsfiddle.net/bvSby/

于 2012-11-23T23:01:50.753 に答える