コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

[CSS] 浮遊するもの

WBOY
リリース： 2016-07-21 14:52:59
オリジナル
959 人が閲覧しました

要素が浮く仕組み

要素の水平浮動方向は、要素が左右にのみ移動でき、上下には移動できないことを意味します。

フローティング要素は、その外端がそれを含むボックスまたは別のフローティング ボックスの境界線に触れるまで、できるだけ左または右に移動します。

フローティング要素の後の要素がそれを囲みます。

フローティング要素の前の要素は 影響を受けません。

テキスト

フローティングとは、ドキュメントフローから半切り離された状態であり、絶対配置のようにドキュメントフローから完全に切り離されているわけではありません。

絶対位置:



この時点では、div1 には高さが設定されていません。div2 では高さが 100px に設定されていますが、div2 は絶対的な配置が完全にドキュメント フローから外れているため、div2 をまったく認識できません。

フローティング：最初のケース



div2 に left float を設定しました。div1 の div2 のフローティングの影響をクリアしないと、div1 はフローティングを感じることができないため、div1 の高さを拡張できません。

しかし、フロートをクリアすると、div1 はフロートの存在 (ドキュメント フロー内に存在するフロートに相当) を認識できるようになり、高さが拡張されます。

ここには 2 つの解決策があります

フローティング: 2 番目のケース

狂気の陽てんかん


float (div2) は

を認識できるため、正常に表示できます。つまり、 floated 要素の前の要素は影響を受けません。

フローティング: 3 番目のケース

精神病


が float (div2) の存在を感じられない場合、

は float でカバーされますが、完全にはカバーされません。

の背景は確かにカバーされていますが、

のテキスト内容はカバーされていないことがわかります。フローティングではドキュメント フロー内のテキストはカバーされませんが、その他の部分はカバーされません。属性がカバーされます。

解決策

にclear:left;を設定して、

が(div2)の存在を感じられるようにします。

精神病


関連ラベル：
[CSS]浮动的那点事儿
ソース：php.cn
前の記事：非常に優れたFLASHプラグイン 次の記事：CSS3アニメーションのコールバック処理
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
2015
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2179
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1838
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1730
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1750
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート