これはクイックキャンパスコースのまとめです.
「The RED:堅牢なUI設計のための表記ガイドby鄭燦明」

float

https://drafts.csswg.org/css2/#float-position

の画像とテキストストリームを配置するためのプロパティ(下図参照)

CSSにカラムを配置するのに使用しますが、エラーが多数発生しています.

用途は、

を無効にする必要があります.

出図属性の目的

の図要素の幅は縮小され、従来のフロー

から遠ざかる.

隣接する後行ブロック要素は出図要素と重なり、行内要素は出図要素の周囲を

流れる.

clear、flow-rootプロパティで無効

clear:印刷ボックスに表示される最後のサブエレメントのプロパティ

flow-root:印刷要素に適用するコンテナボックスの属性

列を配置する場合に多く使用されますが、元の列の属性

を適用するわけではありません.

not clear

floatが無効になっていない場合、印刷されたボックスは親ボックスの要素を増加させず、印刷されていない要素の高さだけが親ボックスに認識されます.

clear

フローティングエレメントや他の周囲のフローエレメントの高さが反映され、親に認知されます.

float > float

親要素にフローティングアトリビュートを追加するには

<p class="container">
  <span class="float">floating element</span>
  동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세
</p>

<style>
.container {
	float: left;
}
.float {
	float: left;
}
</style>

blank element

サブエレメントの最後に空のエレメントを追加し、clearプロパティを空のエレメントに適用します.

<p class="container">
  <span class="float">floating element</span>
  동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세
  <span class="blank"></span>
</p>

<style>
.float {
	float: left;
}
.blank {
	display: block; // clear 속성은 block 요소에만 적용 가능
    clear: both;
}
</style>

overflow:hidden;

親要素「overflow:hidden;」属性の適用

<p class="container">
  <span class="float">floating element</span>
  동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세
</p>

<style>
.container {
	overflow: hidden;
}
.float {
	float: left;
}
</style>

display:inline-block;

親要素の表示プロパティを「inline-block」に変更

<p class="container">
  <span class="float">floating element</span>
  동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세
</p>

<style>
.container {
	display: inline-block;
}
.float {
	float: left;
}
</style>

::after{clear:both;}

仮想要素セレクタafterを使用して、親要素の仮想blank elementを作成し、要素をクリアします.

<p class="container">
  <span class="float">floating element</span>
  동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세
</p>

<style>
.container::after {
    content: '';
    display: block;
    clear: both;
}
.float {
	float: left;
}
</style>

display:flow-root;

親要素の表示プロパティをflow-rootに変更
9888 IEブラウザはサポートされていません

<p class="container">
  <span class="float">floating element</span>
  동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세
</p>

<style>
.container {
    display: flow-root;
}
.float {
	float: left;
}
</style>

codepenの例の表示

float & display

float要素は通常ブロックである
→displayプロパティがなくてもfloatプロパティ:width/height、垂直余白/paddingプロパティ
→したがって、通常、floatはdisplay属性

を指定する必要はないと宣言する.
CSS Lintルールの説明
ルールID:display-property-グループ化
このルールの目的は、使用するdisplayプロパティと一致しない他のプロパティを消去することです.これにより、不要なコードを削除し、より小さく、よりクリーンなCSSファイルを作成できます.CSS Lintは以下の状況をエラーと判断した.

display:width、height、margin、marging-top、marging-bottom、floatとともにインラインが使用される場合、警告

display:inline block floatとの併用時に警告

display:blockを垂直位置合わせとともに使用すると警告

が発行されます.

display:table-*margin(およびその変形)またはfloatとともに使用する場合に警告

が発行されます.

COLUMN LAYOUT

floatは通常、カラムの配置に使用されますが、元の適用カラム属性ではありません.floatを使用せずにカラムレイアウトを配置する方法について説明します.

CSS属性列

columnsプロパティを使用して、複数のdivまたはp要素を作成することなく、1つのdivまたはp要素にテキストを配置できます.任意の数の列を作成し、配置できます.
<'column-width'> || <'column-count'>→値はcolumn-width、column-count、column-count

https://www.w3.org/TR/css-multicol-1/#the-multi-column-model

<style>
.container {
      max-width: 640px;
      columns: 310px 2; /* <'column-width'> || <'column-count'> */
      column-gap: 20px; /* column의 여백 */
      column-rule: 20px solid #0002; /* column 사이 여백 스타일 */
      background: #eee;
}
</style>

codepenの例の表示

break-inside: avoid

列の内容が途中で切り取られない属性を設定します.

<div class="container">
  <section>
    <h2>제목</h2>
    <p>장문의 내용 .......</p>
  </section>
  <section>
    <h2>제목</h2>
    <p>장문의 내용 .......</p>
  </section>
  <section>
    <h2>제목</h2>
    <p>장문의 내용 .......</p>
  </section>
  <section>
    <h2>제목</h2>
    <p>장문의 내용 .......</p>
  </section>
</div>

<style>
.container {
  max-width: 640px;
  columns: 310px 2; /* <'column-width'> || <'column-count'> */
  column-gap: 20px; /* normal == 1em */
  background: #eee;
}

section {
  margin-bottom: 1em;
  break-inside: avoid;
  background: #ddd;
}
</style>

codepenの例の表示

Summary

図は使用可能であり、列を展開するために使用する必要がある場合は、フローティング

をキャンセルする必要があります.

列を展開する場合、

は、列属性または「display:flex」、「display:grid」属性を使用して実現することができる.