【CSS】clear:both; のデザイン要素使わずに疑似要素:after; で回り込みを回避

回り込みを解除するデザイン指定は

clear: both;

この指定を挿入せずに

疑似要素 after で回り込みを回避する方法。

例えば横ならびリスト。

li にfloat:left を指定するとリストの次の要素が回り込んでくる。こんなときに使う便利な方法。

●HTML

<ul class="box">

  <li>リスト1</li>

  <li>リスト2</li>

</ul>

.box {
  zoom: 100%;
 }

.box:before, .box:after {
 display: table;
 content: "";
 ine-height: 0;
 }
.box:after {
 clear: both;
 }

.box li {
  float: left;
 }

上記記述でうまくいかないときがありました。

こちらだとどうでしょうか。

.box:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

zoom: 100%; はIE対策。

疑似要素でボックスのうしろにボックスを追加。ここにclear:both;を追加して回り込みを回避

htmlのソースがシンプルにまとまります。