CSSフロート
ここに関係する屬性は float で、その値は次のように割り當(dāng)てることができます:
left: 要素は左にフロートします。 right: 要素は右にフロートします none: フローティングなし 継承: 親から浮動(dòng)プロパティを継承します
クリア プロパティもあります: 主に全方向のフローティング屬性 (継承された屬性を含む) を削除するために使用されます
まず基本的な HTML および CSS ファイルを作成しましょう: 以下は基本的な內(nèi)容です:
html:
<div class="qd"></div> <div class="wd"></div> <div class="ed"></div>
CSS
.qd{ width: 100px; height: 100px; background-color: lightskyblue;
}.wd{ width: 100px; height: 100px; background-color: lightseagreen;
}.ed{ width: 100px; height: 100px; background-color: lightsalmon;
}以下は表示効果です:
これに基づいて、最初の 2 つを左に、最後の 1 つを右に追加して、どのような効果が得られるかを確認(rèn)します。
部屋の中を走るいくつかの小さなものと同じように、走る方向を指定すると、境界線まで走ります。テストするには、それらのためのスペースを定義することもできます (3 つの div をすべて配置します)。次のように:
float: left;float: right;
次に表示されます: 
しかし、以下のようにフロートする必要がない場(chǎng)合は、上記のエフェクトの下に文を追加したい場(chǎng)合があります。
<div class="container"> <div class="qd"></div> <div class="wd"></div> <div class="ed"></div> </div>
をコンテナに直接追加すると、
が表示されます。これは、このdivがfloating屬性も継承していることを示しています。フォントを下に移動(dòng)したい場(chǎng)合は、font div Floatをキャンセルする必要があります。次に、次のコンテンツを CSS に追加します:
<div class="text">hello php</div>
Rendering:
