まず第一に、p はブロックレベルの要素であることを知っておく必要があります。これはページ上の排他的な行を占め、上から下に配置されます。これは伝説的なフローです。 
p1 の幅が非常に小さい場合でも、ページ上の 1 行で p1 と p2 を収容でき、p 要素はブロックレベルで独自の要素を占有するため、p2 は p1 の後にランク付けされないことがわかります。ライン。上記の理論は標準フローの p を参照していることに注意してください。
レイアウトがどれほど複雑であっても、基本的な出発点は「複数の p 要素を 1 行に表示する方法」です。フローティングは、特定の p 要素を標準ストリームから切り離して標準ストリーム上に浮かせることと理解でき、標準ストリームと同じレベルにないため、フロートと呼ばれます。
例えば、上図のp2が浮いているとすると、標準の流れから外れますが、p1、p3、p4はまだ標準の流れの中にあるので、p3は自動的に上に移動してp2の位置を占め、流れを再編成する。図に示すように: 
図からわかるように、p2 は float に設定されているため、p3 は自動的に上に移動して p2 の位置を置き換え、p1、p3、および p3 が移動します。 ｐ４を順番に並べて新たな流れとする。また、float は標準フローの上にフロートするため、p2 は p3 の一部をブロックし、p3 は「短い」ように見えます。これは、p2 が左にフローティングしていると理解できます (float. :right;) は当然右側に配置されます。ここでの左右とは、ページの左端と右端を指します。
p2 を右にフロートすると、次のような効果になります: 
このとき、p2 はページの右端近くに配置され、p1、p3 で構成されるフローが読者に明確に表示されます。 、上記のp4。
これまでのところ、p 要素を 1 つだけフロートさせていますが、それ以上はどうすればよいでしょうか?
次に、p2 と p3 の両方に left float を追加します。効果は次のとおりです。 
同様に、p2 と p3 は標準フローに属さないため、p4 は自動的に上に移動して「新しい」フローを形成します。 " with p1 標準流量、フロートは標準流量に浮くので、p2 は再び p4 をブロックします。
ここで重要なのは、p2 と p3 が同時にフローティングに設定されている場合、p3 は p2 に従うことになります。これまでの例では p2 がフローティングであることに気づいたかどうかわかりませんが、実際はそうではありません。 t. p1 の後に続きます。したがって、重要な結論を導き出すことができます:
特定の p 要素 A が浮動小数点であり、A 要素の前の要素も浮動小数点である場合、A 要素は前の要素の右側に続きます (これら 2 つの要素があれば)を 1 つの行要素に配置できない場合、A 要素は次の行に押し込まれます)、A 要素の前の要素が標準ストリーム内の要素である場合、A の相対的な垂直位置は変更されません。つまり、A の上部は常に前の要素と同じになります。簡単に言うと、2 つの float:left が水平に配置されます。最初のストリームが標準ストリームで、2 番目のストリームが float:left の場合、2 番目のフロートは最初のストリームの下に配置されます。 HTMLコードはpの順序で決まります。
ページの端に近い端が表、ページの端から遠い端が裏です。
読者の理解を助けるために、さらにいくつかの例を示します。
p2、p3、p4 を左浮動に設定すると、効果は次のようになります:
上記の結論によると、p4 の分析から開始すると、上位要素 p3 が浮動していることがわかり、p4 がそれに続きます。 p3; p3 は、上部要素 p2 も浮動していることを検出するため、p3 は p2 に続きます。また、p2 は、上部要素 p1 が標準ストリーム内の要素であることを検出するため、p2 の相対的な垂直位置は変更されず、上部は変わりません。 p1 要素の下部に合わせて配置されます。浮かせたままなので左側がページの端に近いので左側が前なのでp2は一番左になります。 
p2、p3、および p4 がすべて右フローティングに設定されている場合、効果は次のようになります: 
原理は基本的に左フローティングと同じですが、対応関係に注意する必要があります。右に浮いているので右側がページの端に近いので右側が手前になるのでp2は一番右になります。
p2 と p4 を左にフローティングすると、効果図は次のようになります:
やはり結論によれば、p2 と p4 はフローティングで標準フローから外れているため、p3 は自動的に上に移動して、 p1 での標準フロー。 p2 は、前の要素 p1 が標準ストリーム内の要素であることを検出するため、p2 の相対的な垂直位置は変更されず、p1 の下部に揃えられます。 p4 は、前の要素 p3 が標準ストリーム内の要素であることを検出します。そのため、p4 の上部と p3 の下部は整列されます。図からわかるように、p3 が上に移動した後、p4 も同様になります。は上に移動し、p4 は常に上に移動します。これは、それ自体の上部が前の要素 p3 (標準フローの要素) の下部と揃うようにするためです。
この時点で、フロートの追加をマスターした読者はおめでとうございますが、フロートのクリアも上記の基礎に基づいて非常に簡単に理解できます。
上記を検討すると、フローティング前、つまり標準的なフローでは要素は縦に配置されていますが、フローティング後は横に配置されていることがわかります。
フロートをクリアすることは、水平配置を破壊することとして理解できます。
フロートをクリアするためのキーワードはclearであり、公式の定義は次のとおりです:
構文:
clear : none left | Both
Values:
none : デフォルト値。浮遊オブジェクトは両側で許可されます
左: 浮遊オブジェクトは左側で許可されません
右: 浮遊オブジェクトは右側で許可されません
両方: 浮遊オブジェクトは許可されません
定義は非常に簡単です理解していますが、実際に使用すると読者は混乱するかもしれません。
定義に間違いはありませんが、あまりにも曖昧すぎて途方に暮れてしまいます。
上記の根拠に基づいて、ページ上に p1 と p2 の 2 つの要素しかない場合、シナリオは次のようになります。 
この時点では、p1 と p2 は両方ともフローティングです。ルールでは、p2 は p1 の後に続きますが、p1 がフローティングではなく、p2 が左側にフローティングされるのと同じように、p2 が p1 の下に配置できることを望みます。
現時点では、clear float (clear) が使用されます。純粋に公式の定義に従う場合、読者は次のように記述しようとするかもしれません。これは、floating 要素が許可されていないことを意味します。 p1 の右側 p2 は浮動要素であるため、ルールに従って自動的に 1 行下に移動します。
実際、この理解は間違っており、効果はありません。
CSS のクリアフロート (clear) については、次の点に注意してください。このルールは、clear を使用する要素自体にのみ影響し、他の要素には影響しません。
どうやって理解しますか？上の例では、p2 を移動させたいのですが、p1 要素の CSS スタイルで Clear float を使用し、p1 の右側の浮動要素をクリアする (clear:right;) ことで p2 を強制的に下に移動させようとしています。このクリアフロートは p1 で呼び出されるため、p1 にのみ影響し、p2 には影響しません。
p2 を下に移動したい場合は、p2 の CSS スタイルで float を使用する必要があります。この例では、p2 の左側に浮動要素 p1 があるため、p2 の CSS スタイルで clear:left; を使用して浮動要素を p2 の左側に表示できないように指定している限り、要素、p2 は強制的に 1 行下に移動します。
それでは、ページ上に p1 と p2 の 2 つの要素しかなく、両方とも右にフローティングしている場合はどうなるでしょうか?読者はこの時点で次のようにシーンを自分で推測できるはずです: 
この時点で p2 を p1 に移動させたい場合は、どうすればよいでしょうか?
p2 を移動したい場合は、p2 の CSS スタイルで float を呼び出す必要があります。これは、float はそれを呼び出す要素のみに影響を与えることができるためです。
p2 の右側に浮動要素 p1 があることがわかります。p2 の CSS スタイルで Clear:right; を使用して、p2 の右側に浮動要素が表示されないように指定できます。 、そのため、p2 は強制的に 1 行下に移動し、p1 の下にランク付けされます。 
後で拡張しましょう:
clear:both が追加されていない場合、効果は次のようになります: 
2 行目は float であるため、灰色の背景色は 2 行目に追加されません。 body それらは同じレベルにありません。疑似クラス: after は 2 行目を地面に戻すために使用されます
<head>
<style>
.ob-title{
background-color: orange;
}
.ob-body{
background-color: #ddd;
}
.ob-body .menu{
float: left;
width: 200px;
background-color: pink;
}
.ob-body .content{
float: left;
background-color: aquamarine;
}
.clearfix:after{ /*在.clearfix后边追加一个隐藏的block,带一个clear:both属性*/
content: "";
display: block; /*block宽度会横向填充满屏幕，在父元素的最后追加一个height:0，占满屏幕的看不见的细长条*/
line-height: 0;
clear: both; /*这个最下边细长条左右两边都清除float*/
}
</style></head><body style="margin: 10px;">
<p class="ob-title">头部信息</p>
<p class="ob-body clearfix"> <!--此处调用尾类-->
<p class="menu">左侧菜单</p>
<p class="content">右侧内容</p>
<!--<p style="clear: both;"></p>--> <!--第二种写法，不用调用clearfix类-->
</p></body>clear を追加した後の効果:両方:
最後に、分析してみましょう: なぜ、clearfix を追加した後は大丈夫なのでしょうか? 2 つの記述方法は実際には同じことを意味します。つまり、.ob-body の最後に空の <p></p>(只要是块的就行，因为只有块，才可以横向撑满)，这个<p></p>其实就是一个看不见的细长条，因为他在.ob-body的最下边，并且并不是float的，一定会受到.ob-body的背景色的控制，他的存在定义了.ob-body的高度，所以高度范围内都会被灰色的背景色影响到，虽然第二行依旧是飘在天空，但地面已经被铺上了银色。并且这个最下边的<p></p> を追加するには、clear:both が必要です。そうでない場合、それが単なる標準ストリームの場合、最初のストリームの最後近くになります。実際、この例では (2 行目は float:left であるため)、clear:left を使用することもできますが、汎用性を高めるために、両方を使用します。また、検証済み: このルールは、クリアされる要素自体にのみ影響し、他の要素には影響せず、非表示の p 要素の両方がクリアされます。
以上がCSS-floatのclear:bothの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
これは発生することは想定されていません。不可能をトラブルシューティングしますMay 15, 2025 am 10:32 AMあなたが考えたことのない他の何かであることが判明したそれらの不可能な問題の1つをトラブルシューティングすることがどのように見えるか。
@KeyFrames対CSSトランジション：違いは何ですか？May 14, 2025 am 12:01 AM@keyframesandcsstransitionsdifferincomplexity：@keyframesallowsfordeTailedAnimationのシーケンス、whilecsstransitionshandlesimplestatechanges.usecsstransitionsは、ButtonColorChanges、および@keyframesforintricateanimationslikerotatingingspinnnersを使用します。
静的サイトコンテンツ管理にページCMSを使用しますMay 13, 2025 am 09:24 AM私は知っています、私は知っています：たくさんのコンテンツ管理システムオプションが利用可能であり、私はいくつかテストしましたが、実際にはY＆＃039;知っているものはありませんでしたか？奇妙な価格設定モデル、困難なカスタマイズ、一部は全体になることさえあります＆
HTMLのCSSファイルをリンクするための究極のガイドMay 13, 2025 am 12:02 AMCSSファイルをHTMLにリンクすることは、HTMLの一部で要素を使用することで実現できます。 1）タグを使用して、ローカルCSSファイルをリンクします。 2）複数のタグを追加することにより、複数のCSSファイルを実装できます。 3）外部CSSファイルは、そのような絶対URLリンクを使用します。 4）ファイルパスとCSSファイルの読み込み順序の正しい使用を確認し、パフォーマンスを最適化すると、CSSプリプロセッサを使用してファイルをマージできます。
CSS Flexbox vsグリッド：包括的なレビューMay 12, 2025 am 12:01 AMFlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1）FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2）グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。
CSSファイルを含める方法：メソッドとベストプラクティスMay 11, 2025 am 12:02 AMCSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。
FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AMはい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを
軌道力学（またはCSSキーフレームアニメーションの最適化方法）May 09, 2025 am 09:57 AM独自のコードをリファクタリングするのはどのように見えますか？ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
Dreamweaver Mac版
ビジュアル Web 開発ツール
