古い案件のCSSを開くと、リスト（li要素）をfloatで横並びにして、Internet Explorerだけ階段状にガタガタ崩れる、という対処コードを今でも見かけます。当時はこれが定番の悩みでした。
結論を先に書くと、IEは2022年6月15日にサポートが終了しているので、IE向けのfloatハックは今はもう不要です。そして横並びリストそのものも、いまはfloatではなくdisplay: flexで組むのが正攻法になりました。
この記事では、まず当時のIE特有のfloat崩れがどういう現象だったかを歴史として振り返りつつ、2026年のいま、リストを横並びにする現代的な書き方（Flexbox・gap・必要ならinline-block）と、clearfixの今の立ち位置までをまとめて整理します。古いコードを引き継いだ人も、これから横並びを組む人も、この記事だけで現在地がわかるようにしています。
当時のIEで起きていた「floatリストの階段崩れ」とは
まず歴史の話から。当時よくあったのが、横並びのナビゲーションを次のように組むパターンです。liの中のaにdisplay: blockとfloat: leftを同時に指定する書き方ですね。
<ul class="select">
<li><a href="#">CAFES</a></li>
<li><a href="#">FOODS</a></li>
<li><a href="#">GOODS</a></li>
<li><a href="#">GALLERYS</a></li>
<li><a href="#">GROUPS</a></li>
<li><a href="#">HOUSES</a></li>
</ul>.select a {
float: left;
padding: 4px 12px;
display: block;
text-align: center;
}モダンブラウザでは問題なく横一列に並ぶのに、IEで開くと項目が一段ずつズレて階段状に崩れる。これがいわゆる「floatリストのIE崩れ」でした。
原因は、リストの構造を作っているliではなく、その中のaにfloatを指定していた点にあります。当時のIEはliのレイアウト計算にクセがあり、ブロック要素のマージンや幅の扱いが他ブラウザとズレることがありました。a側にfloatを寄せると、その差が横並びの崩れとして表に出てきたわけです。
当時の現実的な回避策はシンプルで、floatはaではなくliに指定する、というものでした。
.select li {
float: left;
}
.select a {
padding: 4px 12px;
display: block;
text-align: center;
}「CSSをスッキリさせたいからaに全部まとめたい」という気持ちはわかるのですが、横並びの土台はあくまでリスト項目のli。そこにfloatを置くのが、当時としては崩れにくい書き方でした。今でも古いサイトのCSSにこの形が残っているのは、この事情があったからです。
2026年のいま、IE向けハックはもう不要
ここからが本題です。Microsoftは2022年6月15日にInternet Explorer 11デスクトップアプリのサポートを終了しました。公式アナウンスでも「2022年6月15日に、特定バージョンのWindows 10上でIE11デスクトップアプリのサポートを終了した」と明記されています。
後継はMicrosoft Edgeで、レガシーなIE依存サイト向けには「IEモード」が用意されています。このIEモードのサポートも少なくとも2029年までとされていますが、これはあくまで業務システムなどの互換目的。一般的なWebサイト制作でIE単体の表示を気にする理由は、もうありません。
つまり、冒頭で挙げた「aではなくliにfloatを指定する」という回避策も、IEのためだけにやる必要はなくなったということです。IE向けのCSSハックや条件分岐コメントも同様に、いまは外していい時代になりました。このあたりは別記事のCSSハックとは？今はもう不要？IE終了後のモダンなブラウザ差異対処法でもまとめています。
出典: Microsoft Learn「Internet Explorer 11 desktop application ended support」／Windows Blogs「Internet Explorer 11 has retired and is officially out of support」
横並びリストの正攻法はFlexboxになった
では、いまリストを横並びにするならどう書くか。答えはfloatではなくFlexbox（display: flex）です。横並びはfloatの本来の用途（テキストの回り込み）ではなく、あくまで「並べたいから」やっていたもの。その目的にはFlexboxのほうがはるかに素直に合います。
先ほどのナビゲーションをFlexboxで書き直すと、こうなります。
.select {
display: flex;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.select a {
display: block;
padding: 4px 12px;
text-align: center;
}親のulにdisplay: flexを付けるだけで、子のliが自動で横一列に並びます。floatのときのようにliへ個別にfloatを指定する必要はありません。
嬉しいのがgapプロパティです。floatの時代は項目同士の間隔をマージンで調整し、両端の余分なマージンを打ち消す…という地味な手間がありました。Flexboxならgap: 8pxのように書くだけで、項目の「間」にだけ均等な余白が入ります。端には余白が付かないので、計算がぐっと楽になります。
中央寄せや均等配置もjustify-contentで一行です。
.select {
display: flex;
gap: 8px;
justify-content: center; /* 中央寄せ。両端揃えなら space-between */
}floatでは「並べる」「間隔を空ける」「揃える」をそれぞれ別々のテクニックでこなしていましたが、Flexboxはこれらをまとめて、しかも直感的に書けます。横並びリストに関しては、もうfloatを選ぶ理由はほぼないと考えていいです。
inline-blockを使う場面と、clearfixの今
Flexbox一択かというと、補助的にinline-blockが役立つ場面も残っています。たとえば、複雑なレイアウト制御は要らず「項目を横に並べたいだけ」で、しかも文章の中にインライン的に混ぜたいようなケースです。
.select li {
display: inline-block;
padding: 4px 12px;
}ただしinline-blockには、要素間の改行やスペースがそのまま隙間になるという独特のクセがあります。横並びレイアウトを本格的に組むなら、やはりdisplay: flexのほうが扱いやすいです。inline-blockは「軽い横並びの選択肢」くらいに考えておくとちょうどいいと思います。
そしてclearfix。floatした子要素で親の高さが潰れるのを防ぐ定番ハックでしたが、これも横並びをFlexboxやGridで組むようになった今では、出番が大きく減りました。floatを使わなければ、そもそも高さの潰れも起きないからです。
どうしてもfloatを使う場面（テキストの回り込みなど）で高さ潰れを防ぎたいときも、いまは擬似要素のclearfixよりdisplay: flow-rootを親に一行付けるほうがスッキリします。floatそのものの整理はCSSのfloatとは？回り込み・clearfix・Flexboxの使い分けを解説で詳しく書いているので、合わせて読んでみてください。
まとめ
floatリストのIE崩れと、その後の現代的な書き方を整理します。
・当時の崩れの原因は、liではなくaにfloatを指定していたこと。回避策は「floatはliに指定する」だった。古いCSSにこの形が残っているのはこのため。
・IEは2022年6月15日にサポート終了。IE向けのfloatハックや条件分岐は、いまはもう不要。
・横並びリストの正攻法はdisplay: flex。親に一行付ければ子が横並びになり、間隔はgap、揃えはjustify-contentで完結する。
・軽い横並びならinline-blockも選択肢だが、隙間のクセに注意。本格的なレイアウトはFlexboxが扱いやすい。
・clearfixはfloatを使わなければ不要。どうしてもfloatする場面ではdisplay: flow-rootが今風。
古い案件でIE対応コードを見かけたら、まず「IEはもう終わっている」と思い出してください。そのうえで横並びはFlexboxに置き換える。これが2026年のいちばんラクで確実な対処です。
