在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_(kāi)的，也就是子元素多高，父元素就多高
但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷
由于父元素的高度塌陷了，則父元素下的所有元素都會(huì)向上移動(dòng)，這樣將會(huì)導(dǎo)致頁(yè)面布局混亂
解決方案
將元素overflow設(shè)置為一個(gè)非visibility的值 scroll或auto
最好用的是hidden
EI6 以及以下的瀏覽器不支持BFC ：
hasLayout
解決方法：
zoom:1;
list-style:none; 去除項(xiàng)目符號(hào)
清除浮動(dòng)：
clear：both；清楚影響最大的浮動(dòng)
配合使用解決高度塌陷
.clearfix（類名，約定俗稱）：after{content:內(nèi)容；display:block; clear:both;}
zoom:1 兼容IE6
定位:
position屬性可以控制Web瀏覽器如何以 及在何處顯示特定的元素。
可以使用position屬性把一個(gè)元素放置到網(wǎng) 頁(yè)中的任何位置。
可選值：
static
relative
absolute
fixed
相對(duì)定位:
每個(gè)元素在頁(yè)面的文檔流中都有一個(gè)自然位置。相 對(duì)于這個(gè)位置對(duì)元素進(jìn)行移動(dòng)就稱為相對(duì)定位。周 圍的元素完全不受此影響。
當(dāng)將position屬性設(shè)置為relative時(shí)，則開(kāi)啟了元素 的相對(duì)定位。
當(dāng)開(kāi)啟了相對(duì)定位以后，可以使用top、right、 bottom、left四個(gè)屬性對(duì)元素進(jìn)行定位。
相對(duì)定位的特點(diǎn):
如果不設(shè)置元素的偏移量，元素位置不會(huì)發(fā)生改變。
相對(duì)定位不會(huì)使元素脫離文本流。元素在文本流中 的位置不會(huì)改變。
相對(duì)定位不會(huì)改變?cè)卦瓉?lái)的特性。
相對(duì)定位會(huì)使元素的層級(jí)提升，使元素可以覆蓋文 本流中的元素。
絕對(duì)定位:
絕對(duì)定位指使元素相對(duì)于html元素或離他最近 的祖先定位元素進(jìn)行定位。
當(dāng)將position屬性設(shè)置為absolute時(shí)，則開(kāi)啟 了元素的絕對(duì)定位。
當(dāng)開(kāi)啟了絕對(duì)定位以后，可以使用top、right、 bottom、left四個(gè)屬性對(duì)元素進(jìn)行定位。
絕對(duì)定位的特點(diǎn):
絕對(duì)定位會(huì)使元素完全脫離文本流。
絕對(duì)定位的塊元素的寬度會(huì)被其內(nèi)容撐開(kāi)。
絕對(duì)定位會(huì)使行內(nèi)元素變成塊元素。
一般使用絕對(duì)定位時(shí)會(huì)同時(shí)為其父元素指定一 個(gè)相對(duì)定位，以確保元素可以相對(duì)于父元素進(jìn) 行定位。
固定定位:
固定定位的元素會(huì)被鎖定在屏幕的某個(gè)位置上，當(dāng) 訪問(wèn)者滾動(dòng)網(wǎng)頁(yè)時(shí)，固定元素會(huì)在屏幕上保持不動(dòng)。
當(dāng)將position屬性設(shè)置為fixed時(shí)，則開(kāi)啟了元素的 固定定位。
當(dāng)開(kāi)啟了固定定位以后，可以使用top、right、bottom、left四個(gè)屬性對(duì)元素進(jìn)行定位。
固定定位的其他特性和絕對(duì)定位類似。
z-index:
當(dāng)元素開(kāi)啟定位以后就可以設(shè)置z-index這 個(gè)屬性。
這個(gè)屬性可以提升定位元素所在的層級(jí)。
z-index可以指定一個(gè)整數(shù)作為參數(shù)，值越 大元素顯示的優(yōu)先級(jí)越高，也就是z-index 值較大的元素會(huì)顯示在網(wǎng)頁(yè)的最上層。
作業(yè)一開(kāi)班信息表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作業(yè)1</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
font: 12px/1 宋體；
}
.box1{
width: 300px;
/*height: 471px;
background-color: #bfa;*/
/*text-align: center;*/
margin: 50px auto;
}
.box2{
border-top: 2px #019e8b solid;
height: 36px;
background-color: #f5f5f5;
line-height: 36px;
padding: 0px 22px 0px 16px;
}
.box2 a{
float: right;
color: red;
font-size: 12px;
}
.box2 h3{
font:16px/36px "微軟雅黑";
}
.box3{
border: 1px solid #deddd9;
padding: 0px 28px 0px 20px;
}
.box3 a{
color: black;
text-decoration: none;
font-size: 12px;
}
.box3 a:hover{
color: green;
text-decoration: underline;
}
.box3 h3{
margin-top: 15px;
margin-bottom: 15px;
}
.box3 ul{
list-style: none;
border-bottom: 1px dashed #deddd9;
}
.box3 li{
margin-bottom: 15px;
}
.box3 .red-font{
color: red;
font-weight: bold;
}
.box3 .right{
float: right;
}
.box3 .box4{
border: none;
}
.right{
margin-top: 9px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<a href="#">18年面授開(kāi)班計(jì)劃</a>
<h3>近期開(kāi)班</h3>
</div>
<div class="box3">
<h3><a herf="#">人工智能+Python-高新就業(yè)班</a></h3>
<ul>
<li>
<a href="#">開(kāi)班時(shí)間：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">預(yù)約報(bào)名</span></a>
</li>
<li>
<a href="#">開(kāi)班時(shí)間：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">無(wú)座，名額爆滿</span></a>
</li>
<li>
<a href="#">開(kāi)班時(shí)間：<span>2018-04-26</span></a>
<a class="right" href="#"><span>開(kāi)班盛況</span></a>
</li>
<li>
<a href="#">開(kāi)班時(shí)間：<span>2018-04-26</span></a>
<a class="right" href="#"><span>開(kāi)班盛況</span></a>
</li>
<li>
<a href="#">開(kāi)班時(shí)間：<span>2018-04-26</span></a>
<a class="right" href="#"><span>開(kāi)班盛況</span></a>
</li>
</ul>
<h3><a herf="#">Android開(kāi)發(fā)+測(cè)試-高薪就業(yè)班</a></h3>
<ul>
<li>
<a href="#">開(kāi)班時(shí)間：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">預(yù)約報(bào)名</span></a>
</li>
<li>
<a href="#">開(kāi)班時(shí)間：<span>2018-03-23</span></a>
<a class="right" href="#"><span>開(kāi)班盛況</span></a>
</li>
<li>
<a href="#">開(kāi)班時(shí)間：<span>2018-01-23</span></a>
<a class="right" href="#"><span>開(kāi)班盛況</span></a>
</li>
<li>
<a href="#">開(kāi)班時(shí)間：<span>2018-12-20</span></a>
<a class="right" href="#"><span>開(kāi)班盛況</span></a>
</li>
</ul>
<h3><a herf="#">大數(shù)據(jù)軟件開(kāi)發(fā)-青芒工作室</a></h3>
<ul class="box4">
<li>
<a href="#">開(kāi)班時(shí)間：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">預(yù)約報(bào)名</span></a>
</li>
<li>
<a href="#">開(kāi)班時(shí)間：<span>2018-01-23</span></a>
<a class="right" href="#"><span>開(kāi)班盛況</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
作業(yè)二 導(dǎo)航條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.p1{
width: 1000px;
margin: 50px auto;
overflow: hidden;
background-color: #55a8ea;
}
.p1 li{
list-style: none;
float: left;
width: 25%;
text-align: center;
}
.p1 a{
display: block;
width: 100%;
text-decoration: none;
font-size: 14px;
line-height: 40px;
color: white;
}
.p1 li:hover{
background-color: #00619f;
color: white;
}
</style>
</head>
<body>
<ul class="p1">
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">聯(lián)系</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>
</body>
</html>
