記事ディレクトリ

1.浮く
2.疑似要素
3. 標準ストリーム
4.インラインブロック要素の問題
5.フローティングの役割
6.フローティングの特徴
7.クリアフロート

1.浮く

CSSのFloat(フローティング)は要素を左右に移動させ、周囲の要素も並べ替えます。

要素の水平方向はフロートです。これは、要素が左または右にしかできないことを意味します。
フローティング要素は、外側の端が含まれているボックスまたは別のフローティングボックスの境界に接触するまで、可能な限り左または右に移動します。
浮動要素の後の要素はそれをラップします。フローティング要素の前の要素は影響を受けません。
画像が左にフロートしている場合、次のテキストフローは画像の右に折り返されます。

2.疑似要素

疑似要素: CSS を使用してラベルの効果をシミュレートする

疑似要素	効果
：：前	親要素のコンテンツの前に疑似要素を追加する
：：後	親要素コンテンツの最後に疑似要素を追加します

必须要有content属性
疑似要素はデフォルトでインライン要素です

3. 標準ストリーム

块级元素独占一行->垂直布局
行内元素/行内块元素一行可以显示多个水平布局

4.インラインブロック要素の問題

次に、インラインブロック要素で発生する問題について説明します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      
      
      width: 100px;
      height: 60px;
      display: inline-block;
    }
    .one{
      
      
      background-color: skyblue;
    }
    .two{
      
      
      background-color: grey;
    }
  </style>
</head>
<body>
  <div class="one">1</div>
  <div class="two">2</div>
</body>
</html>

これは div の折り返しと書き込みの効果です.
ここに画像の説明を挿入
これは折り返しなしの書き込みの効果です.

2 つのボックスの間にスペースを入れずに折り返して書き込みたい場合は float を使用する必要があります.

5.フローティングの役割

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      
      
      width: 100px;
      height: 60px;
      display: inline-block;
    }
    .one{
      
      
      background-color: skyblue;
      /*设置浮动*/
      float: left;
    }
    .two{
      
      
      background-color: grey;
      /*设置浮动*/
      float: left;
    }
  </style>
</head>
<body>
  <div class="one">1</div>
  <div class="two">2</div>
</body>
</html>

表示効果:
ここに画像の説明を挿入

6.フローティングの特徴

1.浮动会脱离标准流(俗称"脱标"),在标准流中不占位置

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .one{
      
      
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    .two{
      
      
      width: 200px;
      height: 200px;
      background-color: grey;
    }
    .three{
      
      
      width: 300px;
      height: 300px;
      background-color: greenyellow;
    }
  </style>
</head>
<body>
<div class="one">111</div>
<div class="two">222</div>
<div class="three">333</div>
</body>
</html>

ここに画像の説明を挿入
これがフローティングなしの表示効果です. ではフローティング付きのものを見てみましょう.
上記のコードを元にワンクラスセレクターにフローティングを追加します.

    .one{
      width: 100px;
      height: 100px;
      background-color: skyblue;
      /*增加浮动*/
      float: left;
    }

効果:
ここに画像の説明を挿入
2 番目の div ボックスが最初の div ボックスの位置に到達したことがわかります, これはフローティングオフラベル現象です, これはフライアップに相当します.
しかし, 青い div ボックスは灰色の div ボックスの内容をカバーしていません.適応外ですが、一種の準適応外ですが、
浮动的元素比标准流多半个级别,可以覆盖标准流中的元素これもフローティングの第二の特徴です。

この時点で、2 つ目の div にフローティングを追加すると、どのような効果が得られるでしょうか?
例:

    .two{
      width: 200px;
      height: 200px;
      background-color: grey;
      /*增加浮动*/
      float: left;
    }

効果
ここに画像の説明を挿入
2 番目の div は最初の div の隣に配置され、浮动找浮动下一个浮动元素会在上一个元素的左右浮动 ->浮动的第三个特点
浮動要素は上部に対して配置されます。これは、顶对齐上部の配置が望ましくない場合は、ボックスにマージンを追加して、位置合わせのずれを実現することもできます

フローティング表示効果:

行は複数表示できます
幅と高さを設定できます

浮动后的元素具有行内块元素的特点,但是浮动的元素之间换行写不会有缝隙

7.クリアフロート

ここでフローティングをクリアすることは、フローティングコードをクリアすることではありませんが、他の要素はフローティングの影響を受けます。他の要素がフローティングの影響を受けないようにするため、フローティングをクリアする必要があります
。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .one{
      
      
      width: 500px;
      height: 300px;
      background-color: pink;
      margin: 0 auto;
    }
    .two{
      
      
      width: 100%;
      height: 100px;
      background-color: greenyellow;
    }
    .three{
      
      
      /*浮动*/
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin: 0 auto;
    } 
  </style>
</head>
<body>
<div class="one">
  <div class="three"></div>
</div>
<div class="two"></div>
</body>
</html>

効果:
ここに画像の説明を挿入
緑のボックスを青いボックスの下の位置に表示したい場合
、ピンクの div の高さを削除すると、次の効果が現れます:

F12 を押してこの時点で確認すると、最初の div が見つかります。 length と width は 500 * 0.
ここに画像の説明を挿入
青い div はマークから外れています. したがって、緑の div は上に移動しています. これはフローティングの影響を受けています.

父子级关系,父元素没有高度,子元素浮动,后面的标准流盒子就会受到影响
最简单的办法就是给父元素设置高度,但是通常情况下,不会这么写

フローティングをクリアする別の方法は次のとおりです。

方法 1: 追加のタグ

この方法には次の 2 つのステップがあります。1.给父元素内容的最后加一个块级元素 2.给增加的这一个块级元素增加设置: clear:both

例:
今すぐコードを変更する

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .one{
      
      
      width: 500px;
      /*height: 300px;*/
      background-color: pink;
      margin: 0 auto;
    }
    .two{
      
      
      width: 100%;
      height: 100px;
      background-color: greenyellow;
    }
    .three{
      
      
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }
    /*清除浮动*/
    .clearfix{
      
      
      clear: both;
    }
  </style>
</head>
<body>
<div class="one">
  <div class="three"></div>
  <!-- 增加一个块级元素 -->
  <div class="clearfix"></div>
</div>
<div class="two"></div>
</body>
</html>

効果：
ここに画像の説明を挿入
この方法は浮きを解消するだけでなく、再びピンク色を出します

インライン要素を増やして元のボックスを開く方法です
缺点: 增加了额外的元素,会使HTML结构变得复杂

方法 2: 単一の疑似要素

このメソッドは、追加のタグを疑似要素に置き換えるための
ものです. 基本的な書き方:

    .clearfix::after{
      content: '';
      display: block;
      clear: both;
    }

補足（互換性のため）：

    .clearfix::after{
      content: '';
      display: block;
      clear: both;
	  /*在网页中看不到伪元素*/
      height: 0;
      visibility: hidden;
    }

この疑似クラスセレクターを直接親要素に呼び出させるだけで、
原理はエクストラタグメソッドと同じ
ここに画像の説明を挿入

方法 3: 二重疑似要素

単一の疑似要素の書き込み方法に似ています
:

    .clearfix::after,
    .clearfix::before{
      content: '';
      display: table;
    }
	/*真正清除浮动的标签*/
    .clearfix::after{
      clear: both;
    }

这里的 .clearfix::before 是为了解决外边距塌陷问题
次に、親クラスに疑似クラスセレクターを参照させる.
single 疑似要素と double 疑似要素は、float をクリアする 2 つの方法です. 覚える必要はなく、直接使用するだけです.

方法4:overflow

フロートをクリアする別の非常に簡単な方法があります:直接给父元素设置 overflow:hidden
ここでは説明しませんが、非常に簡単です. 自分で試すことができます.

ご覧いただきありがとうございます! この記事が少しでもお役に立てれば幸いです!
コラム: 「Webフロントエンド開発」は随時更新中です, 購読を歓迎します!
「あなたを励まし、一緒に働きたい!」

【Webフロントエンド開発】CSSフローティング