標準のフロートからCSS--ストリーム

1.float使い方

//フロートしない場合
.box1 { 
    幅100ピクセル、
    高さは50px; 
    背景 - 色：赤; 
} 
.box2 { 
    幅は50px; 
    高さ：は50px; 
    背景 - 色：緑; 
}

---最初から流れていないときに、第2のボックスをフローティングフローティング//最初のボックス、第二は、「第一」なる
.box1 { 
    幅100ピクセル、
    高さは50px; 
    背景 - 色：赤;
     フロート：左; 
} 
.box2 { 
    幅は50px; 
    高さ：は50px; 
    背景 - 色：緑; 
}

//すべての時間をフロート

.box1 { 
    幅：100pxに。
    高さ：は50px; 
    背景 - 色：赤;
    フロート：左; 
} 
.box2 { 
    幅は50px。
    高さ：は50px; 
    背景 - 色：緑;
    フロート：左; 
}

 

 

 

浮動要素のフロートが停止します。注：浮動spanタグは、ブロックレベル要素に変身幅、高さを設定することができない必要がある場合。すべてのラベルには、ブロックをまったくフローティング領域の枝を持っていません。

2.浮動要素は、「言葉の周りに」効果を持っています

<div>カセット。1 </ div> 
<P> 12345テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
文字テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
文字テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
語テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
語テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</ P>

 

 

DIVは、p div要素はブロックされ、浮動何の浮動pは残っていない、が、テキストは、pがブロックされていない効果「の周りの言葉」を形成します。 

浮動プロパティ：標準、ウエルト、ワード円周収縮オフ。

収縮率：浮動要素なしセット幅がない場合、は、テキストが自動的に幅に縮小されます（これは非常にインライン要素のようなものです）。