2020-3-5 seo达人
下面这段代码是实现简单的导航效果：
在这里插入代码片<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
list-style:none;
}
.nav{
width:700px;
margin:100px auto;
}
.nav ul li{
float:left;
margin-right:5px;
}
.nav ul li a{
width:100px;
height:30px;
color:#fff;
display:block;
line-height:30px;
margin-right:5px;
text-decoration:none;
background:red;
text-align:center;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.nav ul li a:hover{
background:yellow;
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<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>
</body>
</html>
实现效果如图：
容易犯错的地方：刚开始我把display:block;属性写在最前面，结果一直出不来，后来发现display属性应该放在height和width属性后面
我还学到一个知识点：关于父元素塌陷问题：
在文档流中，父元素的高度默认是被子元素撑开的，也就是说父元素多高，子元素就多高
但是为子元素设置浮动以后，子元素就会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
由于父元素的高速塌陷了，则父元素下所有的元素都会向上移动，这样会导致页面布局混乱
所以我们在开发中一定要避免出席那高度塌陷的问题，这时候我们可以将父元素的高度写死，这样可避免塌陷的问题出现，但是一当高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方式是不推荐使用的
1
解决的方案：
根据W3C标准，在页面中元素有一个隐含的属性叫做Block Formatting Context
方案一：*（设置zoom为1和overflow为hidden）
当开启元素的BFC后，元素会有以下特性：
父元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动的子元素
那如何开启元素的BFC呢？
设置元素浮动
设置元素的绝对定位
设置元素为inline-block(但是设置inline-block可以解决问题，但是会导致宽度丢失，所以不推荐使用这种方式)
将元素的overflow设置为一个非visible的值（推荐方式：将overflow:hidden这个是副作用最小的开启BFC方式，所以可以这么说，以后若是再塌陷，就给父元素加上overflow:hidden属性）
但需要注意的是：
在IE6以及以下的浏览器中并不支持BFC，所以使用这种方式并不能兼容IE6，在IE6中虽然没有BFC，但有另一个隐藏属性叫做hasLayout该属性作用和和BFC类似。但在IE6浏览器可以通过开hasLayout来解决问题
开启方式很多，我们可以直接用一种副作用最小的直接将元素的zoom设置为1，比如父元素是box1,我们可以在父元素中加上zoom:1;
在这里解释一下zoom表示放大的意思，后边跟着一个数值，写几就可以将元素放大几倍，所以zoom:1表示不放大元素，但是可以通过该样式可以开启hasLayout.
但需要注意的是zoom属性放IE6可以，别的浏览器比如Chrome就不行
****所以重头戏来了：若我们想要兼容所有浏览器？