デフォルトのブロック要素は、ターンの複数の底DIVに上から配置されたように、文書の流れに垂直に配置しました
所望のブロック要素は、ページ上に水平に配置された場合は、ストリームからのドキュメント、ドキュメントの要素の後流は、それがすぐ上方下部要素を移動することにより、フローティング要素フロートを作るために使用することができます
CSSプロパティフロート
1.浮動要素がテキストをカバーしていない、テキストは自動的に浮動要素の周りに巻かれます
それは国境や他の浮動親要素に到達するまで2.浮動要素の後、私たちは、ページの左上にしようとか、これは右上部フロートです
3.上側フロート要素がフローティングブロック要素ではない場合、ブロック要素フローティング要素は超えません
4.最も混雑しながら浮動要素は、彼の兄弟の上部を超えることはありません
文書のデフォルトの高さの後流と幅からブロック要素が失われている。概要側面が軟化するだけフローティング前に、文書から流量特性である（（親要素のデフォルト値は100％を占めます）これは）そうです
ドキュメントフローから6のインライン要素は、（ドキュメントフローからすべての要素を1回ブロック要素がいっぱいになるだろう）ブロック要素となるであろう
<style>
body{color:#FFFFFF;}
.box1{
width: 400px;height: 100px;
background-color:red;
float: left;
}
.box2{
width: 400px;height: 100px;
background-color:Black;
float: left;
}
.box3{
width: 100px;height: 100px;
background-color:Blue;
float: right;
}
</style>
<div style="width:550px;border:5px solid #FF4500;overflow:hidden;">
<div class="box1">box1左浮动</div>
<div class="box2">box2左浮动</div>
<div class="box3">box3右浮动(为什么不到右上角?)</div>
<!--浮动的元素永远不会超过他上边的兄弟元素,最多一边挤-->
</div>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）クリアフロートとフロート効果
文書の流れでは、親要素のデフォルトの高さは、親要素にどのように高く、どのように高いの子要素である伸延キルトの要素です。
子要素は親要素の高さの消失につながる親要素の高さを支えることができませんので、しかし、子の後の要素は、ドキュメントフローのうちので、浮かんでいる。要素が混乱ページレイアウトにつながり、最終的にバックアップに移動します。
（父と息子の要素のための）クリアフロート法：
親要素の高さは、直接コーディングを指定する（推奨されません）
（親子要素のための）透明フロート方法2：
親要素にBFCオンになっています。
クリアフロート法3：（兄弟のための）透明フロートをクリア
透明フロートは、他の要素を除去するために使用することができるフロートをクリアした後、ちょうど清掃を、現在の要素に影響を与える。要素が他の要素のフロートの前の位置に戻ります
前述の要素は、フローティングのままにすると：クリア：左
上記の要素は右に浮動している場合：クリア：右
|値|説明|
|左サイドの要素が許可されていない浮動|左。|
|右|右側に浮動要素を許可していません。|
| Both-は|左右にフロート要素に許可されていません。（クリアその要素浮動要素に最大の影響）|
|なし|デフォルト。浮動要素を許可すると、両側に表示されます。|
|継承|明確な規定は親要素からプロパティ値を継承する必要があります。|
問題（父と息子の要素）につながった透明フロートの高さの崩壊：
直接最後に親要素の高さの崩壊で、空のdivを追加し、クリアな設定
しかし、この方法は、したがって、冗長コードCSSはダミー素子を追加するために使用することができます。
.父元素:after{
content:"";
display:block;
clear:both;
}