CSS 兄弟要素フローティング分析の概要

CSS 兄弟要素フローティング分析の概要

float:左/右/なし;

1. 同じレベルフローティング

(1)ブロックレベル要素を同じ行に表示する(同じ行に表示する要素はすべてフロートさせる必要がある)

<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>
<div class="box3">ボックス3</div>


.box1{
	境界線: 2px 実線の赤;
	幅: 40px;
	高さ:100px;
	フロート:左;
}
.box2{
	境界線: 6px 黒一色;
	幅:100ピクセル;
	高さ:40px;
	フロート:左;
}
.box3{
	境界線: 12px 青実線;
	幅:100ピクセル;
	高さ:300px;
	フロート:左;
} 

(2)インライン要素が幅と高さをサポートするようにする

<span class="box1"></span>
.box1{
	境界線: 2px 実線の赤;
	幅: 40px;
	高さ:100px;
	フロート:左;
} 

3. 幅または高さが設定されていない場合は、幅と高さはコンテンツによって拡張されます。

<span class="box1">こんにちは</span>

.box1{
	境界線: 2px 実線の赤;
	フロート:左;
} 

4. 要素にフロートを追加すると、その要素は標準のドキュメント フロー (ドキュメント フローはドキュメント内のオブジェクトの位置を指します) から外れ、その要素をカバーするためにフロートされていない要素 (後方にフロート) を探すことになり、前の要素とは関係がなくなります。

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>


.box1{
	境界線: 1px 実線の赤;
	幅: 40px;
	高さ:100px;
	フロート:左;
}
.box2{
	境界線: 4px 青実線;
	幅: 140ピクセル;
	高さ:40px;
	フロート:左;
}
.box3{
	境界線: 8px の灰色
	幅: 200ピクセル;
	高さ:200px;
	
} 

5. 要素がフロートされている場合、その要素はまず標準フローを離れ、次にフロート方向に従ってフロートし、前のフロート要素の境界に当たって停止するか、前のレイヤーが要素を収容できずに落ちて次の行に配置されます。

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>


.box1{
	境界線: 11px 赤
	幅: 40px;
	高さ:100px;
	フロート:右;
	
}
.box2{
	境界線: 4px 青実線;
	幅: 140ピクセル;
	高さ:40px;
	フロート:左;
	
}
.box3{
	境界線: 8px の灰色
	幅: 200ピクセル;
	高さ:200px;
} 

6. 要素Aがフロートしていない要素Bの上にフロートすると、Bのコンテンツの元の位置が押し出され、さらには押し出されてしまう。

<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>
<div class="box3">ボックス3</div>


.box1{
	境界線: 11px 赤
	幅: 40px;
	高さ:100px;
	
	
}
.box2{
	境界線: 4px 青実線;
	幅: 60ピクセル;
	高さ:100px;
	フロート:左;
	
}
.box3{
	境界線: 8px の灰色
	幅: 200ピクセル;
	高さ:200px;
} 

分析する際、要素がフローティング状態の場合は、その前の要素のみを参照します。前の要素もフローティング状態の場合は、並べて表示されます。の要素がフローティング状態でない場合は、相対的な位置は変更されません。

詳細な分析: https://www.jb51.net/web/76691.html

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQL でのトリガーとカーソルの紹介と使用

>>:  HTML は、Web ページの作成者が学習して習得しなければならないものです。

推薦する

仮想マシンを作成し、VMware に Redhat Linux オペレーティング システムをインストールする (グラフィック チュートリアル)

VMware で仮想マシンを作成し、Redhat Linux オペレーティング システムをインスト...

MySQL テーブルがロックされているかどうかを照会する方法

具体的な方法: (推奨チュートリアル:MySQLデータベース学習チュートリアル)テーブルロックの状態...

mysql-8.0.11-winx64.zip の詳細なインストール チュートリアル

zip インストール パッケージをダウンロードします。 MySQL8.0 For Windows z...

ES6 ループと反復可能オブジェクトの例

この記事では、ES6 の for ... of ループについて説明します。古い方法以前は、JavaS...

DockerでGDBを使用するときにブレークポイントを入力できない問題を解決する

質問docker で gdb を実行すると、ブレークポイントに到達しますが、ブレークポイントに入るこ...

Vue で HTML 5 ドラッグ アンド ドロップ API を使用する方法

ドラッグ アンド ドロップ API は、ドラッグ可能な要素を HTML に追加し、ドラッグ可能な豊富...

CSS3 アニメーション – ステップ機能の説明

最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメ...

Vue シングルファイルコンポーネントの実装

最近、vue について読みました。これまで基本的に見落としていた単一ファイル コンポーネントを見つけ...

純粋な CSS を使用して 3D 回転効果を実装するサンプル コード

3D効果を実現するには、主にCSSのpreserve-3dプロパティとperspectiveプロパテ...

MySQL の全体的なアーキテクチャの紹介

MySQL の全体的なアーキテクチャは、サーバー層とストレージ エンジン層に分かれています。サーバー...

2021年の花火効果をJSで描画(ソースコードダウンロード付き)

この作品はフロントエンド開発(JSコンテンツ)の知識を使用していますが、フロント部分の後半部分の知識...

Docker を使用してフロントエンド アプリケーションをデプロイする方法

Dockerはますます普及しています。環境を軽量かつ柔軟に分離し、容量を拡張し、運用保守管理を容易に...

単一のMySQLテーブルを復元する手順

休憩中に、眠気を完全に吹き飛ばす電話がかかってきました。「開発者が更新 SQL を書くときに whe...

VMware+centOS 8 で http プロトコルに基づく Git サービスを構築する方法

目次1. 原因2. デバイス情報3. 準備4. Apacheをインストールする5. gitを設定する...