Css3-8の基礎 Cssフローティング（位置決め、フローティング位置決め）_html/css

Css3-8の基礎 Cssフローティング（位置決め、フローティング位置決め）_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:53:42

オリジナル

1530 人が閲覧しました

1. CSS 配置の概要

配置の概要

- 配置: 要素ボックスを相対的に表示する場所を定義します。通常の位置、または親要素、別の要素、またはブラウザウィンドウ自体に対する相対位置

- 通常のフロー位置

- フローティング位置

- 相対位置

- 絶対配置

通常のフロー配置

- ページ内のブロックレベルの要素ボックスが上から下に順番に配置されます

- 各ブロックレベルの要素は新しい行に表示されます (

要素、

要素など)

- 要素ボックス間の垂直距離は、垂直方向の外側のボックスによって決まります。ボックスの端計算された距離

- インライン要素は左から右へ水平方向に一列に配置されます

- 新しい行で開始する必要はありません

- 水平方向パディング、ボーダー、マージンを使用して間隔を調整できます

2. CSS フローティング位置

フローティング概要

- フローティング配置とは、

- 要素を通常のフローから除外します。つまり、要素は標準のドキュメントフローから切り離されます。

- 要素はページ上のスペースを占有しない

- フローティング要素を包含ボックスの左側または右側に配置します

- フローティング要素は依然として包含ボックス内にあります

-フローティングボックスは、外側の端が収容ボックスまたは別のフローティングボックスの境界線に触れるまで、左右に移動できます

- 特別な位置決め効果を実現するためによく使用されます

フローティング配置

- ボックス 1 が右にフローティングされている場合、ボックス 1 はドキュメントフローから切り離され、右端まで右に移動します。 🎜>

- ボックス 1 が左に移動すると、ドキュメントフローから抜け出し、その左端が含まれているボックスの左端に触れるまで左に移動します

- ボックス 1 はドキュメントフローに存在しないため、スペースを占有しません。実際にはボックス 2 を覆い、ボックス 2 がビューから消えます

- 3 つすべてを移動するとボックスを左に移動し、ボックス 1 がそれを含むボックスに当たるまで左にフロートし、他の 2 つのボックスは前のフローティングボックスに当たるまで左にフロートします。3 つのボックスが同じ行に表示されます

- 含まれているボックスが狭すぎる場合、他のフローティングブロックは十分なスペースができるまで自動的に下に移動します (左の画像)

- フローティング要素の高さが異なる場合、それらのブロックは他の浮動要素が下に移動するときに他の浮動要素によって「スタック」される可能性があります (右の画像)

- 浮動要素の外側のエッジは、その親の内側のエッジを超えません

- フロート要素は互いに重なりません

- フロート要素は上下にフロートしません

float 属性

- 場合ボックスが含まれるボックスの左側または右側にフロートするように設定する必要があります。これを実現するには、float 属性を使用できます。

- float プロパティは、要素がどの方向にフロートするかを定義します

- CSS では、任意の要素を float にできます

- float: none/left/right;

clear 属性

- フローティングの影響をクリアするためにクリア属性が使用されます

- クリア: none/left/right/both;

- 要素のどちら側にフローティング要素を含めることが許可されないかを定義します

float と overflow

- float が包含ボックス内の要素に適用された後の、包含ボックスが変更されます

- 包含ボックスにオーバーフロー属性を設定します

概要: この章Css（位置決め、フローティング位置決め）を中心に紹介します。