代码有需要完善或改进的地方吗？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{margin:0px;padding:0;}
    .head{
        width:1100px;
        height:100px;
        margin:0 auto;
        background:black;
        position: relative;
        /*border:1px solid #111;*/
    }
    a{
        float:right;
        color:#fff;
        text-decoration:none;
    }
    ul{
        list-style-type: none;
    }
    .nav{
        position: absolute;
        right: 110px;
        line-height: 100px
    }
    li{
        margin:0 20px;
        float:left;
    }
    /*.nav:after{
        content: "."
        visibility:hidden;
        display: block;
        height: 0px;
        clear: both;
    }*/
    img{
        vertical-align:middle;
        position:absolute;
        left:50px;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="head clearfix">
        <a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></a>
        <div class=nav>
            <ul class="nav-list">
                <li><a href="#">课程</a></li>
                <li><a href="#">职业路径</a></li>
                <li><a href="#">实战</a></li>
                <li><a href="#">猿问</a></li>
                <li><a href="#">手记</a></li>
            </ul>
        </div>
  </div>
</body>
</html>

老师我实现了效果，但有几个疑问。

我这样虽然实现了，但是我把head里的/*border:1px solid #111;*/取消注释后发现父元素塌陷了。我想的原因是我把nav和img都设置成position：absolute了，li也设置了float。这样在实际开发中有什么隐患吗？实际开发中用了float，一般都需要清除浮动吗？
我想的另一种实现方法就是float课程中float案例演示3里的方法。那样父元素不会塌陷，如果方法一没问题的话，实际开发中哪种更常用？

qq_慕用6596887 2020-08-16

源自：CSS网页布局基础 2-4 编程练习

收起

3回答

好帮手慕码 2020-08-18 09:42:51

同学你好，因为本练习只实现顶部导航，所以脱离文档流也是没有关系的。另，假设顶部导航下还有其他内容，可以将下部分内容也脱离文档流、或者是清除浮动~

不过编程是灵活的，要查看具体的情况而定！

祝学习愉快~

收起回答

好帮手慕码 2020-08-17 14:43:51

同学你好，解答如下：

1、有的，因此当发现父级高度塌陷的话，建议：及时清除浮动；同学写的、视频中的两种方法都可以！

2、绝对定位参考于两种情况：（1）元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。（2）当父元素（祖先）都没有定位的时候，按照body进行定位。

因此，当head为固定定位的时候，子级也是可以参照它进行定位布局的。

3、文字居中可以通过行高和text-align来实现：

效果：

祝学习愉快~

收起回答

提问者 qq_慕用6596887 #1

老师，还有一个问题，如果.head的position设置成absolute的话，整个导航条不就脱离文档流了吗？这样没问题吗？

2020-08-17 22:22:20

好帮手慕码 2020-08-17 10:08:56

同学你好，“实现导航条在页面中无论是水平方向还是垂直方向都居中显示。”没有实现，建议修改：

另，1、去掉border设置之后，没有高度塌陷，它的高度是102px：

2、父级高度塌陷是指：子元素浮动导致父元素高度塌陷，即如下情况：

同学可以再理解一下。祝学习愉快~

收起回答

提问者 qq_慕用6596887 #1

。。。我少写了几句。在我说的条件上把.head中的height:100px去掉，会发现父元素塌陷。这样实际开发中会有隐患吗？ 2.谢谢老师指出问题，我没看清题目要求。但是玩有个疑问，把.head模块的position设置成absolute的话，后面的img和nav的position都是设置的absolute。他们的参照物不是最近设置了relative的祖先元素，如果没有那就参照body吗？这里没有relative祖先元素，他们不应该参照body吗，为啥还会在head的框里面？

2020-08-17 12:47:38
提问者 qq_慕用6596887 #2

在加个问题，我这里实现文字居中的方法有改进的地方吗？

2020-08-17 12:50:26