Float(エレメントソート)

15666 ワード

フロントエンド CSS テキストリンク

floatプロパティは、画像とテキストが存在する場合に、画像の周囲のテキストを作成します.
このプロパティを使用する場合は、位置のabsoluteを使用して要素の位置を固定する必要はありません.

float: none;:フローティング要素なし(デフォルト)

float: right;:要素を右に移動

float: left;:要素を左に移動

①ソート

float: left;左揃えfloat: right;右から右へ
右水平位置合わせでは、最初に説明した要素が一番右側に出力されます(出力順序=逆順序)
floatアトリビュートは左、右の水平位置合わせしかできません.そのため、中央の水平位置合わせはmarginアトリビュートを使用する必要があります.

div {
  margin: 0 auto; /* 마진을 auto로 지정해주면 해당 요소를 브라우저 중앙에 위치시킬 수 있다 */
}

② width

width property値が指定されていないblock要素は、親要素の幅を埋めます.
widthプロパティが宣言されていないブロックレベル要素がfloatプロパティを宣言している場合.
widthはinline要素と同じ内容に最小化され、以下の要素の上に浮かぶ.

<head>
  <style>
    .box {
      color: white;
      font-weight: bold;
      font-size: 30px;
      line-height: 50px;
      height: 50px;
      margin: 0 10px;
      padding: 10px;
    }
    .d1 {
      float: left;
      background: red;
    }
    .d2 {
      background: orange;
    }
  </style>
</head>

③float属性に関する問題を解決する方法

1.float属性を宣言する要素とfloat属性を宣言しない要素との間の余白が消える問題

float属性が宣言されていない要素でoverflow: hidden;属性を宣言することで解決できます

<head>
  <style>
    .box {
      color: white;
      font-weight: bold;
      font-size: 30px;
      line-height: 50px;
      height: 50px;
      margin: 0 10px;
      padding: 10px;
    }
    .d1 {
      float: left;
      background: red;
    }
    .d2 {
      overflow: hidden;  /* 이 부분을 추가하거나, d2 요소에도 float 속성을 선언해주면 해결 */ 
      background: orange;
    }
  </style>
</head>

2.float属性が宣言された子要素を含む親要素の高さが正常に反映されない問題

フローティング属性として宣言された子要素の親要素上overflow: hidden;属性を宣言することで解決可能

<html>
<head>
  <style>
    .container {
      color: white;
      text-align: center;
      padding: 10px;
      background-color: #def0c2;
      overflow: hidden; /* 이 부분을 추가함으로써 해결 가능 */
    }
    .d1, .d2 {
      float: left;
      width: 50%;
      padding: 20px 0;
    }
    .d1 {
      background-color: #59b1f6;
    }
    .d2 {
      background-color: #ffb5b4;
    }
  </style>
</head>

:after仮想要素コレクタで解決可能.IE 8をサポートするCS 2構文(:after)を使用することを推奨します.一番お勧めの方法.

<head>
  <style>
    .container {
      color: white;
      text-align: center;
      padding: 10px;
      background-color: #def0c2;
    }
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
    .d1, .d2 {
      float: left;
      width: 50%;
      padding: 20px 0;
    }
    .d1 {
      background-color: #59b1f6;
    }
    .d2 {
      background-color: #ffb5b4;
    }
  </style>
</head>

・宣言可

フローティング属性に代わるdisplay: inline-block;解決.ただし、inline-blockプロパティ要素を連続的に使用する場合は、2つの要素の間に定義されていないスペース(4 px)を自動的に指定することに注意してください.

<head>
  <style>
    .container {
      color: white;
      text-align: center;
      padding: 10px;
      background-color: #def0c2;
      /* 폰트 사이즈를 0으로 지정하여 두 요소 사이에 정의하지 않은 공백을 제거 */
      font-size: 0;
    }
    .d1, .d2 {
      display: inline-block;
      width: 50%;
      padding: 20px 0;
      /* 폰트 사이즈를 재지정 */
      font-size: 1rem;
    }
    .d1 {
      background-color: #59b1f6;
    }
    .d2 {
      background-color: #ffb5b4;
    }
  </style>
</head>

🎁 リファレンスとソース

https://poiemaweb.com/css3-float

🎁 一読にたえる文章

floatプロパティに関する記事

Reference

この問題について(Float(エレメントソート)), 我々は、より多くの情報をここで見つけました https://velog.io/@0jiiino/Float-요소-정렬

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

機能的パイプライン例

WebdriverのJavaScriptをクリックする問題!