CSSの3種類のレイアウトモデル

Webページでは、要素には3つのレイアウトモデルがあります.

ドキュメントフロー(Flow)

層モデル(Layer)

フローティングモデル(Float)

 
1、文系
特徴:デフォルトのWebレイアウトモデルで、ブロック要素は上から下へ順番に垂直に分布し(1行を独占)、行内要素は左から右へ水平に分布して表示されます.
 
2、層模型
特徴:3つの形式1、相対位置決め(position:relative)2、絶対位置決め(position:absolute)3、固定位置決め(position:fixed)
 
3、フローティングモデル
特徴:float異なるフローティングの効果(right,left)を設定する
 
詳細:
相対位置
設定position:relativeは、ドキュメントフローから離れずに相対的に位置決めされます.left,right,top,bottomプロパティにより、エレメントが通常のドキュメントストリームからずれる位置が決定され、エレメントの初期位置に対して移動し、オフセット前の位置は保持されます.要素がオフセットされても、彼はオフセットのない空間を占めています.
 
ぜったいいち
設定position:absoluteは絶対位置決めを表し、ドキュメントフローから離れます.left,right,top,bottomプロパティは、最近の位置決め親に対して位置決めされ、なければドキュメントに対して位置決めされます.
 
固定位置
fixedは固定位置決めを表し、ビュー位置決めに対してブラウザウィンドウのスクロールバーのスクロールに従って変化せず、ドキュメントフローの影響を受けません.
 
z-index
z-index属性は、位置決め要素(position属性値はrelative、absoluteまたはfixedであり、要素が位置決めされていない場合、z-indexを設定するのは無効である)が、表示要素の上下層のような3次元立体的な概念の重畳順序を表すためにz-index属性を導入し、z軸の違いを示す.z−index値の大きい要素は、z−index値の小さい要素に重畳される.この属性が指定されていない位置決めオブジェクトの場合、z-index値は正の値であり、負の値のオブジェクトは下にあります.
 
フローティング要素
フローティング要素の位置付けは、ドキュメントフローに基づいて位置付けされますが、ドキュメントフローの表示が変更され、ドキュメントフローから離れません.
フローティングフローを生成した要素ブロックレベルの要素はすべて表示されません.テキスト属性(inline)要素およびテキスト要素とBFCを生成した要素にはフローティング要素が見られる.
ケース1:親アダプティブパッケージ子(子はフローティング要素)

	

		
1
		
2
		
3
	

.wrapper{
	border: 1px solid black;
}

.content{
	float: left;
	background-color: orange;
	width: 100px;
	height: 100px;
}

親はブロック要素でフローティング要素が見えません.どうやって親級をフローティングの子級に包みますか?
方法1:(実現できるが、推奨しない)手動で高さを加える.
方法2:フローティングフローをクリアします.
擬似要素クリアフローティング

.wrapper::after{
	content:"";
	display:block;/*          ，  block   */
	clear:both;
}

方法3:親要素をBFCに設定

.wrapper{
    /*         ，    */
	/*overflow: hidden;*/

	/*               */
	/*display: inline-block;*/
	/*float: left;*/
	/*position: absolute;*/
	border: 1px solid black;
}

position:absoluteまたはfloat:left/rightが設定されている場合は、内部で要素をinline-blockに変換します.
 
ケース2:新聞類のレイアウトを実現する.imgはfloatプロパティを設定し、文字が画像を囲む効果を実現します.

.img{
    float: left;
    margin-right: 10px;
}