web/css_clearfix の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• web/css_clearfix へ行く。
• web/css_clearfix の差分を削除

#author("2023-12-23T22:28:21+09:00","default:nemusg.pad","nemusg.pad")
#author("2025-08-25T00:21:53+09:00;2023-12-23T22:28:21+09:00","default:nemusg.pad","nemusg.pad")
* clearfix [#zd1eea09]

** Bootstrap4 clearfix [#qfa5dc16]

[[Bootstrap4:https://v4-alpha.getbootstrap.com/]]のclearfixはIE9/Android5以上サポートになったため、記述がシンプルになった。

#code_x{{
.cfx::after {
	content: "";
	display: table;
	clear: both;
}
}}

[[【CSS】最新のclearfixがどんどん短く。Bootstrap 2/3/4のCSSを見て（2016年版）:http://dtp.jdash.info/archives/clearfix_at_Bootstrap_CSS]]

** micro clearfix [#t45eae10]

 2011年4月21日にNicolas Gallagherという方が、A new micro clearfix hackとして記事を投稿しました。

- IE6以上に対応

#code_x{{
.cfx:before,
.cfx:after{
content:" ";
display:table;
}
.cfx:after{
clear:both;
}
.cfx{
*zoom:1;
}
}}

** content: ".";なし版 [#tbae8cd5]

- IE6以上であればこれでいい

#code_x{{
.cfx{
*zoom:1;
*min-height:0;
}
.cfx:after{
content:"";
display:block;
clear:both;
}
}}

** よく使ってたやつ [#y1a92dc1]

 オーストラリア人のTony Aslettという方が、cleafixを考えました。

- Netscape対応のために content: "."; がある

#code_x{{
.cfx:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.cfx{
display:inline-table;
min-height:1%;
}
* html .cfx{
height:1%;
}
.cfx{
display:block;
}
}}

** 参考 [#i2840272]

- [[floatを解除する手法のclearfix と 次世代のレイアウトの話 - Web Design KOJIKA17:http://kojika17.com/2013/06/clearfix-2013.html]]
- [[float解除の決定版。clearfixを考えたら、進化した。 - Web Design KOJIKA17:http://kojika17.com/2011/04/float-clearfix.html]]

#include(parts/feedback,notitle)