Webページのレイアウト要件、標準フローではニーズを満たすことができないため、ページレイアウトを完了するにはフロートする必要があります。
フロートを理解する
选择器{
float:属性值;
}
プロパティ値：
- なし
- 左（左フローティング）
- 右（フロート右）
フローティング機能
1）標準ストリームから離れ、位置を占有しない（元の位置が次の標準ストリームにリークされる）
2）フローティング要素が連続して表示されます。父親がそれに適合できない場合は、デフォルトでは、新しい行が表示されます。デフォルトでは、フローティング要素間にギャップはありません。
3）ブロック要素またはインライン要素に関係なく、任意の要素をフロートできます。幅と高さはフローティングの直後に設定できます。デフォルトはインラインブロック機能と同様であり、表示変換は必要ありません。
フロートボックスと兄弟ボックスの関係
標準ストリーム占有位置フローティング-非占有位置（標準外）
フローティングは、現在または後続の標準ストリームボックスにのみ影響し、前の標準ストリームには影響しません。
フローティング要素と親ボックスの関係
- 浮遊要素は父親の国境を抑えることはできません
- フローティング要素は父親のパディングを圧倒することはできません
- 後で学習するポジショニングは任意に押すことができます
フローティングシンプルアプリケーション
（1）複数のブロックレベル要素を水平に一列に配置します（ここでは、インライン要素はブロックレベル要素に変換されます）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
}
.myclass3{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
}
</style>
</head>
<body>
<span class="myclass1">1</span>
<span class="myclass2">2</span>
<span class="myclass3">3</span>
</body>
</html>
（2）フロートを追加する
<style type="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass3{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
</style>
（3）左に1つ、右に1つ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
float: right;
}
</style>
</head>
<body>
<div class="myclass1"></div>
<div class="myclass2"></div>
</body>
</html>
クリアフロート
フロートのクリアは実際にはフロートのクリアではありませんが、追加されたフロートのクリアが後続の標準ストリームに与える影響です。
子ボックスが標準ストリームの場合、標準ストリームが位置を占めるため、父親は高さを検出できます。
子ボックスは浮いていて位置を占めておらず、父親の身長がゼロであるため、父親は身長を検出できません。
1）追加ラベル方式
最後のフローティング要素の最後にブロックレベルの空のラベルを追加します。
<div style="clear:both;"></div>
--- 这个空标签一定是块元素.
短所：構造が混乱しやすい。
2）オーバーフロー属性メソッド
overflowを追加します：フローティング要素の
親に非表示;デメリット：コンテンツが増えると、コンテンツがクリップされ、オーバーフローする必要のあるコンテンツを表示できなくなります。
3）疑似要素がフロートをクリアした後
.clearfix:after {
/* 使用伪元素必须添加content属性 */
content: "";
/* 因为伪元素是行内元素，所以需要转换成块元素 */
display: block;
/* 兼容 */
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
4）ダブル疑似エレメントクリアフローティング
.clearfix::before,
.clearfix::after {
/* 要想使用伪元素，必须写上content属性 */
content: "";
/* 这里写成block也是没有问题的，为什么使用table,这是老的写法，兼容老版本浏览器 */
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
フロートはいつクリアされますか？
- 父親には身長がありません。
- 子ボックスが再び浮きます。
- フロートは後続のレイアウトに影響するためです。