CSS overflow: hiddenを使ってメニューバーのレイアウト崩れないようにする方法

環境
Google Chrome 111.0.5563.65(Official Build)
Windows 10 Home 64bit

書式
親要素
overflow: hidden;
子要素
float: left;
親子要素:親にoverflow:hiddenで子のfloatを解除します。
親と子の関係がある場合で、floatした子要素は、親要素から高さを認識できなくなります。
親要素にoverflow:hiddenを使用すると親要素から子要素の高さを認識できるようになります。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<style>
#nav {
list-style: none;
overflow: hidden;
}
#nav li {
width: 110px;
text-align: center;
background-color: skyblue;
float: left;
height: 35px;
line-height: 35px;
margin-right: 2px;
}
#nav li a {
text-decoration: none;
color: red;
font-weight: bold;
padding: 20px;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">東京</a></li>
<li><a href="#">大阪</a></li>
<li><a href="#">福岡</a></li>
<li><a href="#">横浜</a></li>
</ul>
</body>
</html>
<!DOCTYPE html> <html> <head> <style> #nav { list-style: none; overflow: hidden; } #nav li { width: 110px; text-align: center; background-color: skyblue; float: left; height: 35px; line-height: 35px; margin-right: 2px; } #nav li a { text-decoration: none; color: red; font-weight: bold; padding: 20px; } </style> </head> <body> <ul id="nav"> <li><a href="#">東京</a></li> <li><a href="#">大阪</a></li> <li><a href="#">福岡</a></li> <li><a href="#">横浜</a></li> </ul> </body> </html>
<!DOCTYPE html>
<html>
<head>
<style>

#nav {
  list-style: none;
   overflow: hidden;
}

#nav li {

    width: 110px;

    text-align: center;

    background-color: skyblue;

    float: left;

    height: 35px;

    line-height: 35px;

     margin-right: 2px;
}

#nav li a {

    text-decoration: none;

    color: red;

    font-weight: bold;

    padding: 20px;
}
</style>
</head>
<body>

<ul id="nav">

  <li><a href="#">東京</a></li>

   <li><a href="#">大阪</a></li>

   <li><a href="#">福岡</a></li>

   <li><a href="#">横浜</a></li>

</ul>

</body>
</html>

結果
ブラウザの画面サイズによっては回り込みが発生してメニューバーが2段に表示されます。
レイアウトが崩れなくなります。

CSS

Posted by arkgame