26_float

7885 ワード
TIL テキストリンク
## Overflow
  • CSSが入力されていない基本状態
    • **文章の末尾に以下の空白の原因と解消方法を記入してください
    <body>
  <h1>Float (left, overflow)</h1>
  <div class="container">
    <p>container</p>
    <div class="content">
      <p>content</p>
    </div>
    <img src="./img/1.png">
  </div>
</body>
  • imgタグにfloat:leftと入力
    :::flaotを付与すると、親要素の範囲を超えてレイアウトから離れた画像が表示されます.
    • .container {
  margin: 10px;
  border: 5px solid black;
}

.content {
  border: 5px solid red;
}

img {
  float: left;
}
  • 親要素にオーバーフローを入力
    :::オーバーフローとは、親要素のブロックフォーマットコンテキストと一致しない内容が大きすぎて問題が発生した場合に解決策を指定します.
    (=上記の場合、子要素が親要素の範囲を超えている場合、処理方法の属性を決定します.)
    • デフォルト値visibleで、オーバーフローした部分はカットしたhiddenで、それ以外にスクロールとautoもあります.
    **利益の重複を解決するためにオーバーフローを使用する場合もあります.
    注:あなたのベル
    .container {
  margin: 10px;
  border: 5px solid black;
  overflow: auto;
}

.content {
  border: 5px solid red;
}

img {
  float: left;
}

    Clear


  • imgとコンテンツの順序のみ変更
    :::float:leftをimgに付与し、画像を左に傾け、可視画像と内容が重なる.
    • <body>
  <h1>Float (left)</h1>
  <div class="container">
    <p>container</p>
    <img src="./img/1.png">
    <div class="content">
      <p>content</p>
    </div>
  </div>
</body>

  • claer:contentに左に移動
    :::clearに付与されたコンテンツの枠線がfloatに付与されたimgタグの下に下がったと判断できます.

  • float:rightを使用すると、画像が右に移動します.コンテンツの下向きを確認するにはclear:rightを使用します.

  • 上記の手順を1行として表すとclearはfloatを解除する役割を果たすと言える.
    • .container {
  margin: 10px;
  border: 5px solid black;
}

.content {
  border: 5px solid red;
  width: 400px;
  height: 100px;
  clear: left;
}

img {
  float: left;
}

    imgの下のスペース


    なぜなら、divラベルまたはpラベルにimgラベルを追加すると空白になります.これは、imgが行内要素であるためです.インライン要素はブロック要素とは異なり、仮想ベースラインが存在し、空白が発生します.
    paiday:blockを使用してimgをblock要素として作成するか、
    または垂直位置揃え:下部;仮想ベースラインを一致させると、スペースは消えます.
    注:幸せ猫の遊び場img { display: block; } img { vertical-align: bottom; }
    JavaScript #1
    [資料構造]Chapter 04.List