【CSS】横並びリストで高さを持たない＜ul＞に高さをつけよう

グローバルナビや、メニューで、横並びリストをCSSで書くときに

li {
　float: left;
}

で横並びにする人、多いかと思います。

これは正しいのですが、
困ったことに親要素のulタグが高さ0になってしまうこと、
ありませんか？

▼ 個々のリスト要素は高さがあるのに

▼ 親要素のulタグの高さが0になってしまう

これは非常によくあるあるCSSで、マークアップをやっていく段階で
必ずといっても過言でないほど、当たる壁です。

【回避策 その1】親要素にoverflowを指定する

手っ取り早く高さを出すには、親要素のulタグに、overflow: hidden;を
指定してあげます。

ul {
　overflow: hidden;
}
li {
　float: left;
}

本来、overflow: hidden; は、
「要素（ボックス）からはみ出たコンテンツをカットして表示しない」
という意味があるのですが、このような回り込みに適用すると、親要素に高さを与えることができます。

「【回避策 その1】親要素にoverflowを指定する」の場合のCSSソースコード例

ul {
  overflow: hidden;
}

li {
  background: #00bcd4;
  border-right: 1px solid #00a6bb;
  box-sizing: border-box;
  color: #fff;
  float: left;
  list-style-type: none;
  line-height: 50px;
  width: 150px;
  text-align: center;
}

li:last-child {
  border-right: none;
}

【回避策 その2】:before, :after を利用する

ulにoverflow: hidden;を使用してもよいのですが、
例えばマウスオーバーで子要素、孫要素のサブメニューが開くような場合、
overflow: hidden;により表示されなくなってしまう場合があります。

そうなると回避策 その1は利用できなくなるため、別の回避策として
疑似要素を利用します。

具体的には次のサンプルコードの通りです。

li {
  background: #00bcd4;
  border-right: 1px solid #00a6bb;
  box-sizing: border-box;
  color: #fff;
  float: left;
  list-style-type: none;
  line-height: 50px;
  width: 150px;
  text-align: center;
}

li:last-child {
  border-right: none;
}

ul:before, ul:after {
  content: "";
  clear: both;
  display: block;
}

ul本体には何も指定せず、
ul: before　と、ul: after に
空の要素を置いてあげます。

空の要素の指定方法にも様々ありますが、ここでは、
・中身が空（content: “”;）で、
・回り込みを解除（clear: both;）し、
・ブロック要素、つまり横幅100%（display: block;）の
要素を空要素としています。

そうすることで、なんということでしょう

overflowを指定することなく、高さを持たせることができました。