検索
ホームページウェブフロントエンドCSSチュートリアルCSSボックスフローティングの方法を詳しく解説

標準フローでは、ブロックレベルの要素は、それを含む要素の境界まで水平方向に自動的に引き伸ばされますが、垂直方向では兄弟要素と次々に配置され、並べることはできません。 。 「フローティング」メソッドを使用した後は、ブロックレベル要素の動作が異なります。
CSS には float 属性があり、デフォルトでは none に設定されています。これは標準ストリームの通常のケースです。 float 属性の値が left または right に設定されている場合、要素は親要素の左側または右側に近くなります。同時に、デフォルトでは、ボックスの幅は伸縮しません。もちろん、ボックス内のコンテンツの幅に基づいてください。

基本的なコードを準備します

フローティングの性質はより複雑です。最初に基本的なコードを作成します。次の一連の実験は次のコードに基づいており、さまざまな知識ポイントに応じてさまざまな新しいコードが追加されます。


<style>
body {
    margin:15px;
    font-family:Arial; font-size:12px;
}
.father {
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
}
.father p {
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
}
.father p {
    border:1px dashed #111111;
    background-color:#ff90ba;
}   
.son1 {
/* 这里设置son1的浮动方式*/
}
.son2 {
/* 这里设置son1的浮动方式*/
}
.son3 {
/* 这里设置son1的浮动方式*/
}
</style>


    <p>
        </p><p>Box-1</p>
        <p>Box-2</p>
        <p>Box-3</p>
        <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p>
    

上記のコードは 4 つの

ブロックを定義しており、そのうちの 1 つは親ブロックで、他の 3 つはその子ブロックです。観察を容易にするために、各ブロックには境界線と背景色が追加されており、

タグと各 p の間には一定のマージン値が存在します。 3 つのサブ P のいずれにもフローティング設定がない場合、標準ストリームではボックス状態になります。親ボックスでは、以下に示すように、4 つのボックスが右に伸びて垂直に配置されます。

では、これに基づいて実験を始めましょう。一連の実験を通じて、浮遊ボックスの特性を十分に理解することができます。

実験 1: 最初のフローティング p を設定します


.son1 {       float: left;      
}

効果は以下のようになります。この時点で、標準フローの Box-2 のテキストが Box-1 の周囲に配置されていることがわかります。ボックス - 1 の幅は拡張されなくなりましたが、コンテンツを収容できる最小幅になります。同時に、Box-1 は標準フローの外にあり、標準フロー内の Box-2 は Box-1 の元の位置まで押し上げられるため、 Box-2 の左境界線は左境界線と一致しますボックス-1の。

実験 2: 2 番目のフローティング p を設定します

引き続き Box-2 の float 属性を left に設定します。この時点で、Box-2 も変更され、それに基づいて幅が決定されることがわかります。 Box-2の周囲に-3のテキストを配置します。下の図から明らかなように、ボックス 3 の左境界線はまだボックス 1 の左境界線より下にあります。そうでなければ、ボックス 1 とボックス 2 の間のスペースは実際には暗くなりません。背景色 -3、Box-1 と Box-2 の間のスペースは、その余白で構成されます。

実験 3: 3 番目のフローティング p を設定します

次に、Box-3 を左にフローティングに設定します。この時点で、下の図でテキストが配置されているボックスがはっきりとわかります。範囲とテキストはフローティング ボックスの周囲に配置されます。

実験 4: フローティングの方向を変更します

Box-3 を右にフロートするように変更します。つまり、float:right。このときの効果は以下の通りです。

Box-3 が右端に移動したことがわかります。テキスト段落ボックスの範囲は変更されていませんが、テキストが Box-2 と Box-3 の間に挟まれていることがわかります。このとき、ブラウザ ウィンドウを徐々に狭く調整すると、ブラウザ ウィンドウは Box-1 から Box-3 までを 1 行に収めることができなくなり、Box-3 が次の行に押し込まれてしまいますが、テキストは自動的にスペースを埋めます。

実験 5: フローティングの方向を再度変更します

Box-2 を右にフロートし、Box-3 を左にフローティングに変更します。下の図からわかるように、Box-2 と Box-3 の位置が入れ替わったことを除いて、レイアウトは変わっていません。

ここで、もう一度実験に戻り、ブラウザ ウィンドウをゆっくりと狭くして、Box-1 から Box-3 を 1 行に収めることができない場合、前の実験と同様に Box を削除します。次のもの。さて、今回はどれが次の行に押し上げられるのでしょうか? 答えはHTMLの最後に書かれています、つまりBox-3は次の行に押し込まれますが、それでも左に浮いて次の行の左端に到達します。以下に示すように、テキストは引き続き自動的に配置されます。

実験 6: すべてを左に移動します

      下面把3个Box都设置为向左浮动,然后再在Box-1中增加一行,使它的高度比原来高一些,如下图所示。

      那么请想一想,如果继续把浏览器的窗口变窄,结果会如何呢?Box-3会被挤到下一行,那么它会在Box-1的下面,还是Box-2的下面呢?答案如下图。

      Box-3被挤到下一行并向左移动,发现Box-1比Box-2高出一块儿,这样Box-3就会被卡住,进而停留在Box-2的下面。说道最后,需要非常注意的是,如果某个盒子被设置为float,那么它将脱离标准流,其后面的标准流中的盒子将不再受它影响。

实验七:使用clear属性清除浮动的影响

      以使文字的左右两侧同时围绕浮动的盒子。首先将Box-1到Box-2的浮动都改为float:left,而Box-3的浮动为float:right,之后再将Box-3的内容修改为: 


<p>
    Box-3<br>
    Box-3<br>
    Box-3<br>
    Box-3
</p>

      效果如下图:

      如果不希望文字围绕浮动的盒子,又该如何呢?此时对围绕文字所在标签

的样式进行如下修改后,从下面的效果图中可以看出,段落的上边界向下移动,直到文字不受左边的两个盒子影响位置,但仍然受到Box-3的影响。


.father p {
    border:1px dashed #111111;
    background-color:#ff90ba;
    clear:left;
}

      接着,将clear属性设置为right,将看到如下效果。由于Box-3比较高,因此清除了右边的影响,自然左边也就不会受到影响了。还有说明的是可以将clear属性设置为both,从直接消除左右两边浮动盒子的影响。 

实验八:扩展盒子的高度

      关于clear的应用,这里再给出一个例子,将文字所在的段落

标签删除,这时在父p里面只有3个浮动的盒子,它们都不在标准流中,这时浏览器的显示效果如下:

      可以看到,文字段落被删除以后,父p的范围缩成一条,是由padding和border构成的,也就是说,一个p的范围是由它里面的标准流内容决定的,与里面的浮动内容无关。下面将介绍一种方法以使父p的范围能够包含3个浮动的子p,见如下修改后的HTML代码和与之对应的效果图。

<p>
    </p><p>Box-1<br>Box-1</p>
    <p>Box-2</p>
    <p>
        Box-3<br>
        Box-3<br>
        Box-3<br>
        Box-3
    </p>
    <p></p>

以上がCSSボックスフローティングの方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
カーソルの次のレベルCSSスタイリングカーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee&#039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますUI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか?微笑んでいますか?Apr 23, 2025 am 09:57 AM

まあ、SVG&#039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にあります「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう:サファリテクノロジーのプレビューにかなり着陸してください!しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますCSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind&#039;の@Apply機能は、響きよりも優れていますTailwind&#039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind&#039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

私はリリースがないように感じます:正気な展開への旅私はリリースがないように感じます:正気な展開への旅Apr 23, 2025 am 09:19 AM

馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Safe Exam Browser

Safe Exam Browser

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

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール