float 解除するときのdisplay

Question

初心者的な質問、失礼いたします。

コーディングで
floatを解除するときに

例えば（divやid）のblock要素に
display:block;
を記載してから
clear:both;

を指定するのは何でしょうか？

divやidはblock要素なので
block:inline;だと思っていました。

どうぞ宜しくお願い致します。

Answer 1

div要素に display:block; を付けるのは無意味ですね。

ひょっとして下記のようなよくある Clearfix設定のことを言っているのかとエスパーしてみました。

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

この場合は、 .clearfix の要素がブロックレベル要素でも、その疑似要素 ::after はインライン要素なので display: block; は意味があります。

Comments

[JJN]

::afterはインラインだったのですね！！
初心者でググり方もよく分からず、そこへ辿りつけませんでした、とても助かりました。
ちなみにもう一つお聞きしたいのですが、display:block;やcontent:"";を使わずに、いきなりclear: both;だけでは解除できないのでしょうか・・
お手数おかけします。どうぞ宜しくお願い致します

[hatena19]

https://developer.mozilla.org/ja/docs/Web/CSS/::after
疑似要素は、初期値かインライン要素ですので、display:block; でブロックレベル要素に変換する必要があるし、content:""; がなければ中身がなくなるので、after 要素自体かなくなります。
また、clear はブロックレベル要素のみが対象です。
https://developer.mozilla.org/ja/docs/Web/CSS/clear

ドキュメントを見ればすべて書いてあります。

::afterを使わずに、直接下記のような要素を配置すれば、そこでfloatを解除できますが、これでは無意味な要素を配置することになりますので、避けられています。
<div style="clear: both;"></div>

[JJN]

hatena様
ありがとうございます！ご挨拶遅くなり申し訳ございませんでした。模写を見ていたりすると、確かにdivに直接clearを書いていらっしゃる方もいらっしゃいますよね。初心者には、何が正してく、何が避けなければならないのかの判断がコーディングするうえでかなり難しい判断なので、教えていただけると、とても助かります。丁寧にご指導いただけましたので理解することができました。どうもありがとうございました。