CSS の基本チュートリアル: フローティング

CSS float

float: 要素をフロートにします。値は次のとおりです: left (左 float)、right (右 float)
フローティング要素は左または右にフロートし、次のようにフロートします。要素の端、または前のフロート要素の端までの周囲。
浮動要素はスペースをとらなくなり、浮動要素のレベルは通常の要素よりも高くなります。
浮動要素は「ブロック要素」でなければなりません。もともとどんな要素だったとしても。
フローティングされた要素の幅が指定されていない場合、フローティングされた後は可能な限り狭くなります。したがって、フローティング要素は通常、幅と高さが固定されています。
連続する複数の要素は一緒にフローティングする必要があります。

フローティング機能: 複数のブロック要素を並べて配置できます。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
        .box{
            width:350px;
            height:400px;
            background-color:#f0f0f0;
        }
        .box1{
             width:50px;
            height:50px;
            background-color:#ff0000;
            float:left;
        }
        .box2{
             width:50px;
            height:50px;
            background-color:#00ff00;
            float:left;
        }
        .box3{
             width:50px;
            height:50px;
            background-color:#0000ff;
            float:left;
        }
    </style>
    </head>
    <body>
        <div class="box">
            <div class="box1">php.cn</div>
            <div class="box2">php.cn</div>
            <div class="box3">php.cn</div>
        </div>
    </body>
</html>

Q: 要素を囲み、浮動要素をラップするにはどうすればよいですか?

現時点では、次のセクションの知識が必要です。フローティング要素では、クリアフローティング操作を使用します。

学び続ける

新しいファイル

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> .box{ width:350px; height:400px; background-color:#f0f0f0; } .box1{ width:50px; height:50px; background-color:#ff0000; float:left; } .box2{ width:50px; height:50px; background-color:#00ff00; float:left; } .box3{ width:50px; height:50px; background-color:#0000ff; float:left; } </style> </head> <body> <div class="box"> <div class="box1">php.cn</div> <div class="box2">php.cn</div> <div class="box3">php.cn</div> </div> </body> </html>

提出するリセットコード

自動運転