回り込みを解除する方法「clearについて」

アイキャッチ画像 プログラミング
スポンサーリンク

この記事はhtml&cssの回り込みを解除する方法「clearについて」を紹介しています。

こんにちはカピドンです。

今回の興味はプログラミングです。

progateで学んだことをまとめて、不足している部分を追加したりしています。

復習や補足として使ってください。

私も学習中の身なので、間違っている箇所があるかもしれません。

もし間違っていたら、教えていただけると嬉しいです。

カピドン(@kapidon_reads)さん | Twitter
カピドン (@kapidon_reads)さんの最新ツイート。物語、筋トレ、ゲーム、ITのために生きています。 現在は大学生。 物語を1000作以上見てます。 また筋トレ初めて約半年で体脂肪率30→18%になりました。 大学生のうちに筋トレ、プログラミング、イラスト、物語、マーケティング、ブログ、YouTubeで実績作...
スポンサーリンク

floatを解除する方法「clearについて」

 

See the Pen
ymPBXe
by カピドン(プログラミング勉強中) (@kapidon_reads)
on CodePen.

floatプロパティを使うと上記のように、回り込みが発生して、p要素が移動してしまいます。

これを解除するには、clearプロパティを使います。

clearプロパティには「none」、「left」、「right」、「both」の四つの値があります。

  1. none:何もなし
  2. left:左を解除
  3. right:右を解除
  4. both:両方解除

See the Pen
clear
by カピドン(プログラミング勉強中) (@kapidon_reads)
on CodePen.

実際にWEBサイトを製作する時には、bothを使うことをお勧めします。

leftやrightにすると、たぶん頭がこんがらがります。

また通常ならば親要素は子要素の高さを認識し、子要素よりも大きい状態を保ちます。

しかしfloatを使うと文字通り浮いてしまうので、親要素が子要素(float適用)高さを認識しなくなります。

そしてその結果親要素よりも子要素の方が、大きいという現象が起きてしまいます。

もし高さを認識させたい場合には、clearを使う方法、overflowを使う方法、clearfixを使う方法の三つがあります。

詳しくはこちらの記事をどうぞ

HTML&CSS「floatの高さを元に戻す方法3選」

clearまとめ

この記事では

  • floatの回り込みを解除するなら、clearを使う
  • clearには「none」、「left」、「right」、「both」の四つの値がある
  • 実際にWEBサイトを製作する時には、bothがおすすめ。

ということを紹介しました。

少しでも皆さんの役に立てば幸いです。

プログラミング大国を目指してカピドンでした。

ではでは。

 

コメント

タイトルとURLをコピーしました