【まーりん様】floatでの回り込み解除 clearfix クリアフィックスや疑似要素、overflow hiddenについて

【まーりん様】articleが反映されませんでのご回答ありがとうございました。おかげ様でarticleが反映されるようになり、とても助かりました。

またご質問させて頂きたいのですが、PCで表示した時にトップページの記事一覧で、次の記事のタイトルが前の記事の概要に食い込んでしまうのですが、どこを直せばよいのかわかりません。

今までタイトルが青で下線がついていたのが、articleが反映されるようになって黒文字下線ナシになったと認識しているので、試しにarticleの

article {margin-bottom: 40px}

の40pxを100pxにしてみたのですが、記事と記事の間隔が広がらなかった為、この部分だけ反映されていないのでしょうか。キャッシュのクリアをしてみても反映されませんでした。
宜しくお願い致します。

まーりん様
ご相談ありがとうございます。

対策にはいくつか方法がありますが、原因についてはアイキャッチ画像の回り込み指定（float）が原因です。

floatには、それ以降の要素も回り込みをさせてしまう（高さを認識できなくなってしまう）仕様があります。
また、高さが認識できないせいでmarginが効かなくなるなどの弊害もあります。

floatさせたらその下の要素で解除させるというのが基本的な考え方となります。

今回の場合ですと、
1.疑似要素を使った回り込み解除
2.overflowを使った方法
どちらかがあります。

1.疑似要素を使った回り込み解除（clearfix）

CSSの疑似要素というものがあります。○○::after{} ○○::before{} という形でしていします。

例えば見出し前後にアイコンなどの要素を表示させたり、clearfixクリアフィックスにもよく使われます。

実際はclearfixというクラスを作成し、使いまわすことが多いです。

.clearfix::after{
  content: '';
  display: table;
  clear: both;
}

アイコンを出すときはcontent ‘文字参照’ で文字コード・フォントを指定したりしますが、クリアフィックスの際はなにもない ”（シングルクォート2つ）や”” （ダブルクォート2つ）とします。

例えばcontent:’aa’;として実際の表示をみると、指定した要素の前後にaaと表示されるのを確認できるでしょう。疑似的な要素を表示させる指定だが、実際にはなにも表示しない。しかし、その要素にclearを適用して回り込みを解除する･･･というのが目的です。

今回の場合だと以下のようになります。

article {
    margin-bottom:20px;
}
article::after {
    content: 'aa';
    display: table;
    clear: both;
}

articleの後（タグの内側の最後になります）にaaという文字が表示され、その要素にclearが適用されているため、その部分で回り込みを解除しその下の要素に影響しなくなります。

もちろんclearfixクラスをつくり、article class=”clearfix”としても大丈夫です。

他によく使われる方法として、overflow hiddenがあります。

本来のoverflow hiddenの使い方は、高さを指定した要素でその高さを越えてコンテンツがある場合の表示を指定するものです。

overflow scrollなら指定した高さを越えた際にスクロールが出てきます。hiddenなら非表示とします。

overflowを指定すると内部の高さを認識できるようになるため、clearしてもmarginを併用することができます。

article {
    overflow: hidden;
    margin-bottom: 20px;
}

こういった内容はWordPressとは直接関係なく、CSSの勉強になりますね。最初は調べ方も分からず大変かと思いますが頑張ってください。
ご依頼頂ければ有償にてカスタマイズ等の作業も可能ですので気軽にご相談下さい。

参考にして頂ければ幸いです。