CSSでfloatを設定する方法

CSS では、float 属性を使用して float を設定できます。構文は「selector {float:left|right|none}」です。要素は float 属性の値に応じて左または右に移動します。外側の境界線が親要素の内側の境界線、または別のフローティング要素の外側の境界線に触れるまで、周囲の要素も再配置されます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS では、float 属性を使用して float を設定できます。

float 属性は、要素がどの方向に浮くかを定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フロート要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。

基本構文形式:

选择器{float:属性值;}

• 左の要素は左に移動します

• 右の要素は右に移動します

• none 要素はフロートされていません

css フローティングは、要素を通常の標準フロー制御から外して要素を移動させる方法です。その周囲の左または右の要素も再配置されます。

フローティングは、ページ上のオブジェクトが前後に流れる順序を変更できる、非常に便利なレイアウト方法です。これの利点は、コンテンツのレイアウトがシンプルになり、拡張性が高いことです。

フローティングは CSS レイアウトの非常に強力なレイアウト機能であり、CSS レイアウトを理解する上で重要な問題でもありますが、CSS では div を含むあらゆる要素をフローティング表示することができます。

フローティングを使用すると、フローティング属性が設定された要素が標準の通常のフローの制御から離脱して、親要素内の指定された位置に移動できます。

フローティングの性質

フローティングは、CSS のレイアウトに最もよく使用される属性です。

これで 2 つの div ができ、それぞれ幅と高さを設定します。これらの効果は次のとおりであることがわかっています。

現時点では、これら 2 つの div に float: left;## などの float 属性を追加すると、 #、効果は次のとおりです。