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就不行
****所以重頭戲來了：若我們想要兼容所有瀏覽器？