div+cssフローティングの解決策
如何清楚浮动（一）
已知一个大的div容器，这个容器包含了两个子div容器，然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器)，清楚浮动的div容器设置css样式为clear:both，此时，大的div标签的内部(左右两边/*css5*/)浮动就清除了。
如果有一个大的div容器
<body>
<div class="divcss5">
<div class="clear"></div>
<!--<div class="clear eft"></div>
<div class="clear ight"></div>-->
</div>
</body>The float has the marginattribute
その後、私はmargin-top:10px、サブディビジョンコンテナは元のベースで10px下に移動しました、つまり、floatはmargin-topに影響を与えません。一部のオフセットは、margin-left、margin-right、および margin-bottom 属性のオフセットに影響しません。
Floatingにはtop、left、right、bottom属性がありません
次に、margin-top:10px;を削除し、サブディビジョンコンテナにtop:10pxを設定すると、垂直座標がシフトしていないことがわかります。つまり、フローティングです。 トップ属性はありません。同様に、left、right、bottom 属性はありません。
それでは、どのような状況下で、上、左、右、下のプロパティの設定がフローティングに影響するのでしょうか?
floatにはtop、left、right、bottomの属性(相対位置positionの条件設定)があります
そこで、サブdivコンテナに対して相対位置position:relativeを追加し、top:10pxと設定しました。そして突然、サブディビジョンコンテナが下を向いていることに気付き、下が10pxオフセットされました。
子divフローティングの状態を継続し、position:relative;に設定し、次にmargin-left:10px;に設定すると、子divコンテナの位置が水平方向に10pxオフセットされていることがわかります。同時に、マージン上、マージン右、マージン下がすべて変更されます。
つまり、子divコンテナにfloat:leftを設定してからmargin-leftを設定すると機能しますが、topを設定しても効果がありません。相対位置が子 div コンテナに設定されている場合、top はフローティング状態でのみ機能します。つまり、left と top は相対位置にある場合にのみ機能するということでしょうか。そこで、子 div コンテナーの float:left;position:relative; を削除し、対応する CSS コードを次のように記述します。 follow.clear{width: 200px;background: #f2e;color:#030617;height: 20px;top:50px;left:10px;};、結果は子 div コンテナが存在しないことになります位置は横軸と縦軸で移動しているため、相対位置が設定されている場合は左と上のみが機能することがわかります。マージンはポジションを設定するかどうかに関係なく機能します。
上記の float フローティングを続けます。float に継承を設定すると、この時点では子 div はフローティングにならず、デフォルトで左側にあることがわかります。同様に、子 div の先頭にフローティング スタイル none を設定しても、フローティング効果はありません。サブディビジョンコンテナに左右のフロートが設定されている場合のみ、サブディビジョンコンテナはフローティングとして表示されます。 フロートをクリアする方法 (2)
次に、フロートをクリアする別の方法を使用します。HTML コードは依然として上記のコードで、大きなコンテナ内の div の CSS コード: .divcss5{
padding:10px 0 ;幅: 100%; 左: 50%;右: 50%;背景: #007CB5;}、子 div コンテナの CSS コード: .clear{width: 200px;background: #f2e;color:#030617;height: 20px;float: left;}、この時点で表示されるのはフローティング効果で、サブ div コンテナが大きなコンテナの上に浮かんでいます。同じ原理で、css 擬似を使用できます。要素 :after、これは 1 つの非常に単純な CSS コードです。親コンテナーの css 疑似クラス を記述します。コード: .divcss5:after{content: "1";clear: Both;display: block;} , この時点で、大きなコンテナの float がクリアされ、大きな div コンテナの中にサブ div コンテナが含まれていることがブラウザ上で確認できます。ブラウザーで要素を表示すると、after が親コンテナーに含まれていることがわかります。したがって、この div レイヤーが 1 つ欠落していることを除けば、after は親コンテナー内にクリアなフローティング div を追加することと同等です。 ：後 。
以上がdiv+cssフローティングの解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7515
15
1378
52
79
11
19
64
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップの日付を表示する方法
Apr 07, 2025 pm 03:03 PM
回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。
