代码有需要完善或改进的地方吗？
来源：2-4 编程练习
qq_慕用6596887
2020-08-16 22:00:12
<!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://climg.mukewang.com/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里的方法。那样父元素不会塌陷，如果方法一没问题的话，实际开发中哪种更常用？
3回答
-
好帮手慕码
2020-08-18
同学你好，因为本练习只实现顶部导航，所以脱离文档流也是没有关系的。另，假设顶部导航下还有其他内容，可以将下部分内容也脱离文档流、或者是清除浮动~
不过编程是灵活的，要查看具体的情况而定！
祝学习愉快~
0 -
好帮手慕码
2020-08-17
同学你好，解答如下：
1、有的，因此当发现父级高度塌陷的话，建议：及时清除浮动；同学写的、视频中的两种方法都可以！
2、绝对定位参考于两种情况：（1）元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。 （2）当父元素（祖先）都没有定位的时候，按照body进行定位。
因此，当head为固定定位的时候，子级也是可以参照它进行定位布局的。
3、文字居中可以通过行高和text-align来实现：
效果：
祝学习愉快~
0h020-08-17 -
好帮手慕码
2020-08-17
同学你好，“实现导航条在页面中无论是水平方向还是垂直方向都居中显示。”没有实现，建议修改：
另，1、去掉border设置之后，没有高度塌陷，它的高度是102px：
2、父级高度塌陷是指：子元素浮动导致父元素高度塌陷，即如下情况：
同学可以再理解一下。祝学习愉快~
0h020-08-17
相似问题