css floatを使ってつぶれてしまった高さを出す。clearfix

25.02.06

ウェブデザイン備忘録

overflow:hiddenを使っていました。

floatを使ったけど、親要素の高さがなくなった時、overflow:hiddenで高さを出していました。
でも、画像の頭を親要素よりちょっと出したい！なんてときはoverflow:hiddenだと画像が切れてしまいます。
overflow:autoでもだめ。どうしよう…。

親要素のclassにclearfixを追加して、以下のcssを追加する。

.clearfix::after{ content: ""; clear: both; display: block; }

1 2 3 4 5

.clearfix::after{    content: "";    clear: both;    display: block; }

これで、高さを認識してくれるようになりました。。。
よかった・・・

お役に立てましたらadsenseクリックお願いします！

いかがでしたでしょうか？もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

関連記事

• 
  2020.12.09 psdで印刷物を作る時のまとめ
• 
  2023.05.26 Slick カルーセルでPCとスマホで見せる画像の枚数をそれぞれ変える。wordpress
• 
  2022.06.24 XサーバーをSSL化した後にリダイレクトさせる方法
• 
  2019.06.10 css ＰＣで背景固定演出→スマホでは背景普通演出にする方法
• 
  2018.11.20 wordpress そのページだけにcssを適用させる方法。
• 
  2020.10.07 ブラウザの縦幅サイズいっぱい表示、その中央に画像などのコンテンツを置く方法