Q&A
回答ありがとうございます！
参考にさせていただきます！
CSSでの「clearfix」に関しての質問です。
「:after」を使った「clearfix」は理解することができました。
しかし、
CSS
1overflow:hidden
この「clearfix」の使い方がどうしても理解できません。
「cleaefix」は親要素に高さを持たせるために行うものだと認識しています。
それなのに「overflow」の値に「hidden」を入れてしまうと、はみ出た部分は表示しない。
ということになり高さのない親要素は表示されなくなってしまうのではないでしょうか？
回答よろしくお願い致します。
回答3件
0
ベストアンサー
それなのに「overflow」の値に「hidden」を入れてしまうと、はみ出た部分は表示しない。 ということになり高さのない親要素は表示されなくなってしまうのではないでしょうか？
この部分の疑問に対する答えが
「overflowプロパティでvisibleキーワード以外を指定すると、新しいブロックの書式コンテキストを確立することできます。」
ということなのではないでしょうか？
こちらの仕様を見る限り、「ブロック書式コンテキスト」とは要するに「ブロックレベルのボックス」という意味に近いのかな？と思われます。正確な仕様や挙動についてはちょっと表現が難しくて理解し難い部分もありますが、要するに「overflowにvisible以外を指定すると、通常のブロックレベルのボックスと同等の挙動となる」という風に理解すればよいのではないでしょうか？（違ったらすみません）
通常のブロックレベルの要素であれば、子要素の高さに応じて自動的にheightが決まるので、
clearfixされたのと同じような表示になるのも納得が行くと思います。
たとえhidden;が指定されていてもheight自体がautoなら中に収まっているコンテンツははみ出さないので非表示にされることも無いですよね。
値はvisible以外なら良いのでしょうが、autoやscrollではおそらく何か不具合があったのでしょう。
結果として簡易clearfix目的でoverflowを使うなら、hidden;がいいよね、ということになったのだと思われます。
ちなみに私はわりとoverflow:hidden;使う派です。
投稿2015/12/04 09:35
総合スコア3763
0
「overflow:hidden;によるfloat解除のメリットは、cssの指定が長くならない点と、DreamWeaverのデザインビューでもfloatが解除される点です。」
投稿2015/12/04 09:28
総合スコア590
0
floatを解除する手法のclearfix と 次世代のレイアウトの話
こ記事の「overflow」の部分が分かりやすく書いてあります。
ただどうなんでしょう。
私自身下記のclearfixは使いますがoverflow:hidden;を利用したものは使ったことがありません。
CSS
1.clearfix:after { 2 content: ""; 3 clear: both; 4 display: block; 5}
投稿2015/12/04 08:21
総合スコア992
回答ありがとうございます。
僕も「overflow:hidden」は使わないので質問させていただきました。
一つ質問なんですが、
リンク先の「overflowプロパティでvisibleキーワード以外を指定すると、新しいブロックの書式コンテキストを確立することできます。」という部分がいまいち分かりません。
解説していただけないでしょうか？
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/12/07 06:00