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.10.07 ブラウザの縦幅サイズいっぱい表示、その中央に画像などのコンテンツを置く方法
• 
  2018.11.13 要素にアニメーションをつける　プラグイン「Shortcodes Ultimate」
• 
  2018.10.27 粒子状のパーティクルを背景に表示させる方法。
• 
  2021.04.14 wordpress contactform7が迷惑メールにならないようにSPF設定をする
• 
  2018.11.20 wordpress そのページだけにcssを適用させる方法。
• 
  2018.11.20 カスタム投稿設定方法