就是为什么div.nav-list 高度没有坍塌?,我自己试了试发现只要取消掉div.nav-list 的display:inline-block 就会发生高度坍塌。我查了一下第三版的权威指南,浮动元素的包含块就是最近的块级祖先,那么不理应坍塌么。
下面是代码。
<div class="container">
<div class="nav">
<img src="http://s02.mifile.cn/assets/static/image/mi-logo.png" alt="" class="logo" style="background-color: orange;">
<img src="img/logo-1.png" alt="" class="logo-l logo">
<div class="nav-list">
<a href="#">小米手机</a>
<a href="#">小米手机</a>
<a href="#">小米手机</a>
<a href="#">小米手机</a>
<a href="#">小米手机</a>
<a href="#">小米手机</a>
<a href="#">小米手机</a>
<a href="#">小米手机</a>
<a href="#">小米手机</a>
</div>
<input type="text" name="search" id="search" placeholder="净水器">
</div>
div.container{
width: 1226px;
margin:0 auto;
}
div.nav{
padding-top: 20px;
}
div.nav-list{
display: inline-block;
}
div.nav .logo{
vertical-align: bottom;
float: left;
}
div.nav .logo-l{
margin-left: 5px;
}
div.nav-list a{
text-decoration: none;
font-size: 16px;
color: #000;
line-height: 60px;
padding:0 5px;
float: left;
}
div.nav-list a:hover{
color:orange;
}
input {
height: 50px;
margin-left: 75px;
font-size: 16px;
float: right;
}