CSSでfloatを使いこなす

2020年12月16日2021年4月10日CSS

floatプロパティを使うと、要素を右に表示したりすることができます。 サイドバーや細かい部品に使うことも多く、理解しておく必要があります。

CSSのfloatの使い方

floatプロパティを使うと、要素を右や左などに動かすことができます。 その要素は浮いた状態になるので、その下にあった要素が詰められます。 テキストは回り込んで表示されます。 テキストの回り込みが必要ないときなど、floatを解除したい場合、
解除したい要素に対してclearを指定してあげます。 clear: rightなら右にfloatさせた要素より下に配置してくれます。 他にもleft, bothなどがあります。

<h1>見出し</h1>
    <p><img src="img/logo.png" width="100" height="100">こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！</p>
    
    <h2>見出し</h2>
    <p>こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！</p>

img {
  float: right;
}

h2 {
  clear: right;
  /* clear: left;
  clear: both; */
}