CSSフロートの基本的な特徴
CSSフロートの主な特徴は次のとおりです。
- 浮動した要素は通常のドキュメントフローから外れて固定位置を占めなくなり、親要素の左または右に自由に移動することができます。ただし、ほかの浮動要素や親要素の境界に遭遇するまでです。
- フロートする要素は、その後の要素のレイアウトに影響を与えます。フロートしない要素は、フロートする要素の周囲を囲み、できるだけフロートする要素のスペースを占有します。
- フローティング要素の幅は、デフォルトでコンテンツの幅に合わせて可変に設定されています。固定幅を設定したい場合は、幅プロパティを設定することで実現できます。
- フロートした要素は文字を覆わず、文字はフロートした要素の周りを自動的に回り込みます。
- 浮動要素は親要素の高さ計算に影響を与え、親要素に浮動要素だけが含まれている場合、親要素の高さは縮んだ状態になり、クリアフィックスなどで対応する必要があります。
- クリアプロパティを利用することで、フロートを解除し、以降の要素へのフロートの影響を回避できます。
- z-indexプロパティを設定することで、フローティング要素を垂直方向の積み重ね順序で制御できます。
CSSフロートの基本特性であり、フロートを適切に利用することで要素の配置と並べ替えを実現することができます。
