惜梦酱 2020-08-08 20:39 采纳率: 66.7%
浏览 140

行内块嵌套浮动元素为什么没有高度坍塌?

就是为什么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;
}
  • 写回答

2条回答 默认 最新

  • zqbnqsdsmd 2020-08-10 07:48
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题