高度塌陷問題：
在文檔流中，父元素的高度默認是被子元素撐開的震嫉，
也就是子元素多高森瘪，父元素就多高。
但是當為子元素設置浮動以后票堵，子元素會完全脫離文檔流扼睬，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷悴势。
由于父元素的高度塌陷了窗宇，則父元素下的所有元素都會向上移動，這樣將會導致頁面布局混亂特纤。
所以在開發(fā)中一定要避免出現(xiàn)高度塌陷的問題,
我們可以將父元素的高度寫死军俊，以避免塌陷的問題出現(xiàn)，
但是一旦高度寫死捧存，父元素的高度將不能自動適應子元素的高度粪躬，所以這種方案是不推薦使用的。
清除浮動
clear屬性可用于清除元素周圍浮動對元素的影響
元素不會因為上方出現(xiàn)了浮動元素而改變位置
可選值：
clear:left 忽略左側浮動
clear:right 忽略右側浮動
clear:both 忽略全部浮動
clear:none 不忽略浮動昔穴，默認值
定義三個div：父容器container镰官、子容器box1、box2傻咖，這里container沒有給定高度。
css中的塊級元素是獨占一行的岖研，從上往下排列卿操，我們稱為標準流警检，div就是塊級元素。
第一種方式：添加新元素害淤，使用clear:both;
這種方式優(yōu)點就是代碼少扇雕，容易理解，瀏覽器幾乎都支持窥摄，出現(xiàn)的問題比較少镶奉，但缺點就是如果頁面浮動浮動布局多的話，就要添加很多空div去清除浮動崭放，不便優(yōu)化哨苛。雖然這是常用的清除浮動方式，但不建議使用
第二種方式：父容器使用overflow: auto;
使用這種方法币砂，必須定義width或者zoom,而且不能設置高度height建峭，優(yōu)點是代碼少，缺點是不能使用position,否則超出的元素將會被隱藏
第三種：父容器使用偽類:after跟zoom
這種方式是最推薦的决摧，目前大多數(shù)大型網(wǎng)站都是使用這種方式清除浮動亿蒸，瀏覽器兼容好，不會出現(xiàn)什么奇怪的問題掌桩。
zoom是IE專有屬性边锁，可解決ie6,ie7浮動問題，IE8以上和非IE瀏覽器才支持偽類:after波岛。
缺點就是代碼比較多茅坛，需要偽類:after跟zoom一起使用才能兼容所有主流瀏覽器。
但推薦使用盆色，可將改樣式定義為公共樣式灰蛙，減少代碼量
三種清除css浮動的方式就是這樣。其實清除浮動不止這三種隔躲，但這三種是比較常用的摩梧，最為推薦的就是最后一種。清除浮動時宣旱，可根據(jù)當前布局選擇最為合適的方式仅父，不一定說指定要用哪一種，最適合的就是最好的浑吟。
相對定位
當position屬性設置為relative時笙纤，則開啟了元素的相對定位
相對定位不會改變元素原來的特性
相對定位不會使元素脫離文檔流，元素在文檔流中的位置不會改變
如果不設置元素的偏移量组力，元素位置不發(fā)生改變
相對定位會使元素層級提升省容，使元素可以覆蓋文本流中的元素
開班信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>\e</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: 12px/1 宋體;
}
.ann{
width: 300px;
height: 471px;
margin: 50px auto;
}
.ann0{
border-top: 2px #019e8b solid;
height: 36px;
background-color: #f5f5f5;
line-height: 36px;
padding: 0px 22px 0px 16px;
}
.ann0 a{
float: right;
color: red;
}
.ann0 h3{
font: 16px/36px "微軟雅黑";
}
.ann1{
border: 1px solid #deddd9;
padding: 0px 28px 0px 20px;
}
.ann1 a{
color: black;
text-decoration: none;
font-size: 12px;
}
.ann1 a:hover{
color: green;
text-decoration: underline;
}
.ann1 h3{
margin-top: 15px;
margin-bottom: 15px;
}
.ann1 ul{
list-style: none;
border-bottom: 1px dashed #deddd9;
}
.ann1 li{
margin-bottom: 15px;
}
.ann1 .red-font{
color: red;
font-weight: bold;
}
.ann1 .right{
float:right ;
}
.content .no-border{
border: none;
}
</style>
</head>
<body>
<div class="ann">
<div class="ann0">
<a href="#">18年面授開班計劃</a>
<h3>近期開班</h3>
</div>
<div class="ann1">
<h3><a href="#">人工智能+Python-高薪就業(yè)班</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red-font">預約報名</span> </a>
<a href="#">開班時間:<span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-font">無座，名額爆滿</span> </a>
<a href="#">開班時間:<span class="red-font">2018-03-23</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span> </a>
<a href="#">開班時間:<span>2018-01-23</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-font">開班盛況</span> </a>
<a href="#">開班時間:<span class="red-font">2017-12-20</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-font">開班盛況</span> </a>
<a href="#">開班時間:<span class="red-font">2017-11-18</span></a>
</li>
</ul>
<h3><a href="#">Android開發(fā)+測試-高薪就業(yè)班</a> </h3>
<ul>
<li>
<a class="right" href="#"><span class="red-font">預約報名</span> </a>
<a href="#">開班時間:<span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-font">開班盛況</span> </a>
<a href="#">開班時間:<span class="red-font">2018-03-23</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span> </a>
<a href="#">開班時間:<span>2018-01-23</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-font">開班盛況</span> </a>
<a href="#">開班時間:<span class="red-font">2017-12-20</span></a>
</li>
</ul>
<h3><a href="#">大數(shù)據(jù)軟件開發(fā)-青芒工作室</a> </h3>
<ul class="no-border">
<li>
<a class="right" href="#"><span class="red-font">預約報名</span> </a>
<a href="#">開班時間:<span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-font">開班盛況</span> </a>
<a href="#">開班時間:<span class="red-font">2018-01-23</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
