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

float:左/右/なし;

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;
	フロート:左;
}

（２）インライン要素が幅と高さをサポートするようにする

<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;
}