div+cssフローティングの解決策-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

div+cssフローティングの解決策

高洛峰

Mar 31, 2017 am 11:15 AM

css浮く

如何清楚浮动（一）

　　已知一个大的div容器，这个容器包含了两个子div容器，然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器)，清楚浮动的div容器设置css样式为clear:both，此时，大的div标签的内部(左右两边/*css5*/)浮动就清除了。

　　如果有一个大的div容器

，这个大的div包含了一个子div容器

、サブ div コンテナは幅、高さ、背景色を設定しますが、内部、マージン、およびフローティングは設定しません。このとき、サブ div コンテナはデフォルトで左に設定されます。コンテナはフローティングのままです (float)継承ブラウザ属性にはレイアウト効果がありません。次に、サブ div コンテナの float を float:left に設定しました。 float:left を設定すると、サブ div コンテナがフローティングになり、サブ div コンテナが大きな 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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

軌道力学（またはCSSキーフレームアニメーションの最適化方法）May 09, 2025 am 09:57 AM

独自のコードをリファクタリングするのはどのように見えますか？ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。

CSSアニメーション：それらを作成するのは難しいですか？May 09, 2025 am 12:03 AM

cssanimationsArenotintinlentyhardbutrepracticeanderstanding ofcsspropertiesandtimingfunctions.1）

@KeyFrames CSS：最も使用されているトリックMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversitility andpowerincreatingsmoothcssanimations.keytricksinclude：1）defingsmoothtransitionsbetweenstates、2）AnimatingMultipleProperiessimally、3）3）bendorprefixesforbrows -compativity、4）組み合わせwithjavasfo

CSSカウンター：自動番号の包括的なガイドMay 07, 2025 pm 03:45 PM

csScounterSareSareusedTomageautomaticinginginwebdesigns.1）それらは、コンテンツ、リスト、および積極的なものを使用することができます

スクロール駆動型のアニメーションを使用したモダンなスクロールシャドウMay 07, 2025 am 10:34 AM

特にモバイルデバイスでは、スクロールシャドウを使用することは、Chrisが以前にカバーした微妙なUXです。 Geoffは、アニメーションタイムラインプロパティを使用する新しいアプローチをカバーしました。これがさらに別の方法です。

画像マップを再検討しますMay 07, 2025 am 09:40 AM

簡単に復習してみましょう。画像マップはHTML 3.2に戻ります。ここで、最初にサーバー側マップを使用してから、マップとエリア要素を使用して画像上でクリック可能な領域を定義したクライアント側マップをマップしました。

開発者：すべての開発者の調査May 07, 2025 am 09:30 AM

State of Devsの調査は現在、参加に対して開かれており、以前の調査とは異なり、コードを除くすべてをカバーしています：キャリア、職場だけでなく、健康、趣味などもあります。

CSSグリッドとは何ですか？Apr 30, 2025 pm 03:21 PM

CSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。