5

以前、CSS スキルをブラッシュアップしていたときに、ハゲになるチュートリアルに出くわしました。リンクは次のとおりです: http://css.maxdesign.com.au/floatutorial/tutorial0304.htm私はこれに対する答えを探すのに何時間も費やしましたが、私を助けるものは何も見つかりませんでした。

チュートリアルの作成者は、要素で何が起こっているかについて詳細を説明していません。フローティングは要素をページから持ち上げ、指定された方向 (左/右) にフロートさせることを理解しています。クリアすると、フローティング要素がリセットされ、ページのフローに戻されます。

右側がクリアされた場合、これらの要素はどのように右側にフロートされますか? この背後にあるロジックがわかりません。これについての明確化は非常に高く評価され、多分私は私の髪の一部を保持することができます.

編集:これは、上記のリンク先のチュートリアルの CSS コードとスクリーンショットです...

.floatright {
    float: right;
    margin: 0 0 10px 10px;
    clear: right;
}

p { margin-top: 0; }

ここに画像の説明を入力

4

3 に答える 3

4

あなたは清算を誤解しています。clear: right単に、要素が同じコンテキストで以前に右に浮かんだすべての要素を垂直方向にクリアする必要があることを意味します。つまり、他のすべての右に浮かぶ要素の下にドロップする必要があります。視覚化：

|                          |
|            +-----++-----+|
|            |  A  ||  B  ||
|            |     ||     ||
|            +-----++-----+|
|                   +-----+|
|                   |  C  ||
|                   |     ||
|                   +-----+|
|                          |

すべての要素は右にフロートされますが、Cに設定されてclear: rightいるため、前のフロートされた要素より下になります。

于 2012-07-26T06:54:11.573 に答える
0

フロート: 右; 要素が右にフロートする必要があることを意味します (親コンテナー内で右に配置され、親の非フローティング コンテンツがその周りを流れます)。HTML で複数の右浮動要素が互いに続く場合、それらはすべて、親コンテナーがいっぱいになるまで隣り合わせに配置され、その時点で改行が行われます。

clear プロパティは、要素内での float の発生を許可するかどうかを指定します。これは、要素がフローティングかどうかに関係ありません。Clear: right は、右側にフローティング要素が許可されていないことを意味します。

そのため、float: right の例では、画像が右にフロートし、テキストがその周りを流れるようにします。clear: right は、画像が 1 行ではなく上下に配置されるようにします。

于 2012-07-26T06:53:12.007 に答える
0

要素をフロートさせて方向をクリアすると、基本的に (簡単に言えば) ドキュメント フローに改ページが追加されます。クリアされた要素の後に別のフロート要素が同じ方向に続く場合、もちろん右にフロートしますが、最初のフロート要素の下に表示されます。

以下は、フローティング要素の 2 つのセット (1 つはクリアあり、もう 1 つはあり) の例です。

http://jsfiddle.net/Kyle_Sevenoaks/detxc/

それがあなたを助けることを願っています:)

于 2012-07-26T06:53:17.780 に答える