1. 標準フローはブラウザのデフォルトのレイアウトであり、上から下、左から右へのデフォルトのスケジュール レイアウトです。
2. レイアウト方法
2.1 floatingの本質: 画像とテキストを並べてフォーマットする問題を解決します。
*要素がフローティングされると、標準のフローから外れ、レイアウトに影響を与えます。
2.1.1 float を設定しない前（before）：
2.1.2. float を設定した後（after）
* {
padding: 0;
margin: 0;
}
.box1 {
width: 50px;
height: 40px;
background-color: #AFEEEE;
border: 2px solid #3C3C3C;
float: left;
}
.box2 {
width: 300px;
height: 300px;
background-color: #ADFF2F;
border: 2px solid #3C3C3C;
}※ float 要素は標準のスペースを占有しません。流れ。ただし、標準ストリーム内のテキストの書式設定には影響します。
3. フローティングの特徴
3.1. フローティングは標準フローから分離されており、標準フローに影響を与える位置を占めません。フローティングは左右に浮くだけです。
3.2. 浮動要素Aの配置位置は前の要素(ブロックレベル)と関係します。前の要素にフロートがある場合、A 要素の上部は前の要素の上部と位置合わせされます。前の要素が標準フローの場合、A 要素の上部は前の要素の下部と位置合わせされます。 。
3.3. 親ボックス内の子ボックスの 1 つがフローティングされている場合、1 行に表示するには他の子ボックスもフローティングする必要があります。
3.4. Floatは要素の書き込み位置に応じて対応するfloatを表示します。
3.5. 要素をフローティングにした後、幅と高さが設定されていない場合、要素はインラインブロック要素の特性を持ちます。要素のサイズは、定義されたサイズまたはデフォルトのコンテンツに完全に依存します。つまり、要素にはラッピング プロパティがあります。
3.6. フローティングは破壊的です。要素がフローティングされると、元の通常のフロー レイアウトが破壊され、コンテンツが崩れます。
注: 標準フローの親ボックスが高く設定されておらず、すべての子ボックスがフローティングされている場合、親ボックスの高さは 0 に崩壊します
4. フローティングの破壊性によって引き起こされる高さの崩壊の問題を解決します。 .
overflowメソッド:親ボックスにoverflow: hiddenを設定する(折り返しにする)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>溢出处理案例</title>
<style>
.box1 {
/*滚动条随着需要而产生*/
height: 60px;
width: 60px;
overflow: auto;
float: left;
background-color: #5F9EA0;
}
.box2 {
height: 60px;
width: 60px;
overflow: hidden;
float: left;
background-color: #ADFF2F;
}
.box3 {
height: 60px;
width: 60px;
overflow: visible;
float: left;
background-color: #CCCCCC;
}
.box4 {
/*始终有滚动条*/
height: 160px;
width: 160px;
overflow: scroll;
float: right;
background-color: #FFC0CB;
}
</style>
</head>
<body>
<div class="box1">overflow:auto;**minking 的博客minking 的博客minking 的博客</div>
<hr />
<div class="box2">overflow: hidden;**minking 的博客minking 的博客minking 的博客</div>
<hr />
<div class="box3">overflow: visible;**minking 的博客minking 的博客minking 的博客</div>
<hr />
<div class="box4">overflow: scroll;**minking 的博客minking 的博客minking 的博客</div>
</body>
</html>
5. 補足:BFC
オーバーフローは要素の独立性を持たせることができます。レイアウト スペースと権限。bfc 内のすべての要素は、その親要素に従ってタイプセットされ、レイアウトされます。これは、高度な折りたたみの問題を解決する原則です。
例: フローティングは BFC をトリガーすることもでき、以下があります: 位置決め、オーバーフロー、
表示: テーブル、テーブルセル... 6. ページの中心: Web サイトのコア表示領域、通常は中央に表示されます。幅は次のとおりです: 960px 980px 1000px 1190px 1200px;
7. フローティングクリア: 現在の要素の左側と右側にフローティング要素がない場合にのみ、要素は標準フローに表示されます。
************
クリア以上がCSSフローティングの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PMGoofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています
時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AMPavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました
graphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AMGraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、それは私が完璧になったことがあります
円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AMここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
Dreamweaver Mac版
ビジュアル Web 開発ツール
