1.従来のフロー
>一般的なフローレイアウト
（1） 常规流 文档流 普通文档流 常规文档流。所有元素，默认情况下，都属于常规流布局
（2）总体规则：块盒独占一行，行盒水平依次排列
>ブロックは、（を含む）を含みます
-
各ブロックは、（基準座標系）ブロック判定ボックス配置領域を含む、独自のボックスを含んでいます。
ほとんどの場合、ブロックを備えたボックス、カートリッジの内容をその親要素に -
前記カセットブロック
-
カートリッジの各ブロックの合計幅は、包含ブロックの幅と正確に等しくなければなりません。
-
残りのスペースを吸収する（削除の国境に、パディング、マージン）：オート、自動で幅のデフォルト値
-
余白のデフォルト値0は、オートに設定した場合、残りのスペースは、吸収されます （マージンを吸収する能力の幅）
(1) 若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收 (2) 在常规流中，块盒在其包含块中居中，可以定宽，然后左右margin设置为auto(左右各吸收一半) (3) 在常规流中，块盒在其包含块中时，将width设置为auto，左右margin设置为负数，width会随之变宽，吸收剩余内容，达到块盒的总宽度，刚好等于包含块的宽度的代数和 (4) 每个块盒垂直方向上的auto值: height：auto(默认值)，被内容撑开 margin：auto(默认值)，表示0
- パーセント値
- パディング、幅、マージンの値は（すべてのパーセンテージは、高さと、を含むブロックの幅に対応している問題ではない）の割合であってもよいです
高度的百分比： （1） 包含块的高度取决于子元素的高度(父元素没设置宽高)，这种情况设置宽高无效 （2） 包含块的高度不取决于子元素的高度(父元素设置宽高)，百分比相对于包含块的高度
- 上下外側の複合距離
- 従来の二つのブロックは、垂直方向に隣接するマージンが実行される（二マージンの最大値）カセットを流れ合わせ
(1) 如父元素设置了外边距，上下外边距的合并，子元素会和父元素上端重合，这也是前面的 before添加一个元素的content:"";的原因，使脱离重合(或者父元素设置padding)
- サプリメント
当内容盒的宽高设定好，设置padding占取剩余空间（原本是margin-left占据剩余） 当内容盒的宽高没有设定，宽度等于页面最大宽度，设置padding占取内容盒空间
2.可変流量
フローティングアプリケーション
- テキストの折り返し
- 横方向に配置されました
浮動の基本特性
-
フロートプロパティ値
- left: 左浮动,元素靠上靠左排列 - right: 右浮动,元素靠上靠右排列 - none: 默认值, 常规流 注： 1.当一个元素浮动,元素必定为块盒(更改display属性为block) 2.浮动元素的包含块，和常规流一样，为父元素的内容盒 -
箱の寸法
（1）宽度为auto时，适应内容宽度，如果没内容，则宽度为零 (如果是常规流，没有内容， 会默认父级宽度,有内容也会用margin-leftz撑满整个包含块的宽度) （2）高度为auto时，与常规流一样，适应内容宽度 （3）在常规流中，margin左右为auto时，会吸收父级元素剩余内容居中，如果内容占满了，margin就没有用了 在浮动流中，margin为auto时，会自动设置为0 （4）边框、内边距、百分比设置与常规流一样 -
ボックスの配置機能
（1）左浮动的盒子靠上靠左排列 右浮动的盒子靠上靠右排列 （2）浮动盒子在包含块中排列时，会避开常规流块盒 （3）常规流块盒在包含块中排列时，不会避开浮动盒子 （看不见浮动元素的位置） （4）行盒在排列时，会避开浮动盒子 （5）外边距合并不会发生(公用一个外边距)注：テキストが行ボックスでない場合は、ブラウザが自動的にラインラップテキストボックスを生成します、ボックスのラインは、（同様のスパン）匿名の行ボックスと呼ばれ、
-
ボックスの高さが崩壊します
（1）原因：高度坍塌的原因：父级常规流盒子的自动高度，不会考虑浮动盒子 （2）解决办法：清除浮动盒子的浮动 清除浮动，涉及css属性：clear - none： 默认值 - left： 清除左浮动，该元素必须出现在前面元素的左浮动盒子的下方 (看一下天上左边浮动元素的位置) - right：清除右浮动，该元素必须出现在前面元素的右浮动盒子的下方 (看一下天上右边浮动元素的位置) - both： 清除两边浮动，该元素必须出现在前面元素的浮动盒子的下方 (清除上面元素的浮动，就可以出现盒子下方，撑开盒子） 例: .clear::after{ content: ""; display:block; //默认行盒 clear:both; } -
ボックスプレースホルダ
（1）块元素独占一行 （2）float(浮动) float:left; //可以使块元素从左到右依次排列，#可以同在一行,直到排不下 flaot:right;//可以使块元素从右到左依次排列，#可以同在一行,直到排不下 ### 补充 浮动盒子的顶边不得高于上一个盒子的顶边 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左向右排列
