CSS Float(フロート)

フロートとは何ですか?

float は float です。CSS でのその機能は、通常のドキュメントフローから要素を取り出し、その親要素の「左端」または「右端」に移動することです。以下では、この定義におけるいくつかの名詞の概念について説明します:

ドキュメントフロー: HTML では、ドキュメントフローは要素が上から下に配置される順序です。

ドキュメントフロー外: 要素が通常の順序から外れています。

左端/右端: 前述の親要素の左端と右端への移動は、要素が別の浮動要素または親要素のコンテンツ領域 (パディングを除く) の境界に当たるまで左または右に移動することを意味します。

float属性:

① left: 要素は左にフロートします。

② right: 要素は右にフロートします。

③ none: デフォルト値。

④inherit: 親要素からfloat属性を継承します。

例: 左float

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
  <title>float属性</title>
    <style type="text/css">
        #a
        {
            background-color:Red;
            height:50px;
            width:100px;
        }
        #b
        {
            background-color:Yellow;    
            height:50px;
            width:200px;
            float:left;
        }
        #c
        {
            background-color:Blue;   
            height:50px;
            width:300px;
         }
         #d
         {
            background-color:Gray;
            height:50px;
            width:400px;
          }
    </style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>

例: 右float

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
  <title>float属性</title>
    <style type="text/css">
        #a
        {
            background-color:Red;
            height:50px;
            width:100px;
        }
        #b
        {
            background-color:Yellow;    
            height:50px;
            width:200px;
                  float:right;
        }
        #c
        {
            background-color:Blue;   
            height:50px;
            width:300px;
         }
         #d
         {
            background-color:Gray;
            height:50px;
            width:400px;
                  float:right;
         }
    </style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>

隣り合う浮動要素

複数の浮遊要素を一緒に配置すると、スペースがあれば隣同士になります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
  <title>float属性</title>
    <style type="text/css">
        #a
        {
            background-color:Red;
            height:50px;
            width:100px;
        }
        #b
        {
            background-color:Yellow;    
            height:50px;
            width:200px;
        }
        #c
        {
            background-color:Blue;   
            height:50px;
            width:300px;
         }
         #d
         {
            background-color:Gray;
            height:50px;
            width:400px;
         }
         div
              {
             float:left;
              }
    </style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>

Float のクリア - Clear

を使用して要素をフローティングした後、周囲の要素が再配置されます。これを回避するには、clear 属性を使用します。

clear 属性は、浮動要素が要素の両側に表示できないことを指定します。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <title>float属性</title> <style type="text/css"> #a { background-color:Red; height:50px; width:100px; } #b { background-color:Yellow; height:50px; width:200px; } #c { background-color:Blue; height:50px; width:300px; } #d { background-color:Gray; height:50px; width:400px; } div { float:right; } </style> </head> <body> <div id="a">div-a</div> <div id="b">div-b</div> <div id="c">div-c</div> <div id="d">div-d</div> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear