1

テキストがマークアップでその要素の後に続く場合、テキストはフロートされた要素の周りを流れると思いました。では、なぜ次の例で表示された結果が生成されるのでしょうか。

HTMLは次のとおりです。

<div class="float block red">Red</div>
TEXT BETWEEN RED AND BLUE
<div class="float block blue">Blue</div>
<div class="float block green">Green</div>

そしてCSS：

.float{
    float: left;
}
.block{
    width: 50px;
    height: 50px;
}
.red{ background-color: red;  }
.blue{ background-color: blue; }
.green{ background-color: green; }

そしてこれが結果です：

結果

画面に順序が表示されないのはなぜですか：赤、赤と青の間のテキスト、青、緑？

ありがとう

4

2 に答える 2

4

「フロートボックスは通常のフロー内に配置され、フローから取り出されて、可能な限り左または右にシフトされます。コンテンツはフロートの側面に沿って流れる場合があります。[...]ボックスが通常のフローから取り出されると、通常のフロー内にあるすべてのコンテンツはそれを完全に無視し、そのためのスペースを作りません。」</ p>

ソース

左の要素を浮かせているからです。基本的に、これらの要素は、他のフロートされた要素と比較して、ページ上で可能な限り左に配置されると言っています。テキストはフロートされていないため、右端の左にフロートされた要素を基準にしています。それは理にかなっていますか？

目的の結果を得るには、テキストをDIV、SPANなどに配置し、左にフロートさせます。

于 2012-05-04T14:17:30.427 に答える
1

CSSには、ブロックレベル要素とインライン要素の2種類の要素があります。これらの要素とその配置は、フローと呼ばれる概念によって管理されます。

ブロックレベルの要素には前後に区切りがありますが、インライン要素にはありません。これは非常に単純化されていますが、これらはCSSのフローを管理する基本的なルールです。

与えられた要素と属性position:fixedが与えられた要素は、通常の意味でフローから削除されますが、インライン要素とテキストがフロート要素をラップするという追加の警告があります。float

浮いた要素を、物理的に地面から持ち上げ、それ以上移動できなくなるまで左または右に飛んでから、地面に下がるボックスとして想像できる場合は、正しい考えがあります（スタークラフトのテラン基地だと思います）。フロートされた要素はテキストのすぐそばで吹き飛ばされ、テキストが「着地」すると、テキストはそれ自体を再配置してフロートされたものをラップします。

フロートは常に他のフロートに対して相対的な位置にあります。

これの例外は、要素がそれにclearスタックしている場合です。CSSのclearプロパティは、基本的に、ブロックレベルの要素は、フロートを片側または反対側に配置できるようにするか、フロート要素を次の行にキックダウンすることを許可します。実際にはそれよりも少し複雑です。Clearに関するMDNの記事を確認する必要があります。

于 2012-05-04T14:24:44.220 に答える