<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>開班信息</title>
<style type="text/css">
/*清除默認(rèn)樣式*/
*{ margin: 0;
padding 0;
}
/*統(tǒng)一頁(yè)面中的字體*/
body{ font: 12px/1 宋體;
}
.outer{
width:300px;
height:471px;
background-color: #bfa;
/*居中*/
margin: 50px auto;
.title{
border_top: 2px #019e8b solid;
height: 36px;
background-color: #f5f5f5;
/*設(shè)置行高*/
line-height: 36px;
padding: 0px 22px 0px 16px;
}
.title a{
float: right;
color: red;
}
.title h3{
font: 16px/36px "微軟雅黑";
}
.content{
border: 1px solid #deddd9;
}
.content a{
color: black;
text-decoration: none;
font-size: 12px;
}
.content u1{
/*去除項(xiàng)目符號(hào)*/
list-style: none;
}
.content .red-font{
color: red;
font-weight: bold;
}
.content .right{
float: right;
}
</style>
</head>
<body>
<!-- 創(chuàng)建一個(gè)外層div,容納整個(gè)內(nèi)容 -->
<div class="outer">
<!-- 開班信息的頭部 -->
<div class="title">
<h3>近期開班</h3>
<a href="#">18年面授開班計(jì)劃</a>
</div>
<!-- 開班信息的主體內(nèi)容 -->
<div class="content">
<h3><a href="#">人工智能+Python-高薪就業(yè)班</a></h3>
<u1>
<li>
<a class="right" href="#"><span class="red-fond">預(yù)約報(bào)名</span></a>
<a href="#">開班時(shí)間： <span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-fond">無(wú)座,名額爆滿</span></a>
<a href="#">開班時(shí)間： <span class="red-font">2018-03-23</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時(shí)間： <span>2018-01-23</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時(shí)間： <span>2017-12-20</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時(shí)間： <span>2017-11-18</span></a>
</li>
</u1>
<h3><a href="#">Android開發(fā)+測(cè)試-高薪就業(yè)班</a></h3>
<u1>
<li>
<a class="right" href="#"><span class="red-fond">預(yù)約報(bào)名</span></a>
<a href="#">開班時(shí)間： <span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時(shí)間： <span>2018-03-23</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時(shí)間： <span>2018-01-23</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時(shí)間： <span>2018-12-20</span></a>
</li>
</u1>
<h3><a href="#">大數(shù)據(jù)軟件開發(fā)-青芒工作室</a></h3>
<u1>
<li>
<a class="right" href="#"><span class="red-fond">預(yù)約報(bào)名</span></a>
<a href="#">開班時(shí)間： <span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時(shí)間： <span>2018-01-23</span></a>
</li>
</u1>
</div>
</div>
</body>
清除浮動(dòng)
定義三個(gè)div：父容器container、子容器box1、box2，這里container沒(méi)有給定高度。
css中的塊級(jí)元素是獨(dú)占一行的，從上往下排列，我們稱為標(biāo)準(zhǔn)流，div就是塊級(jí)元素。
第一種方式：添加新元素，使用clear:both;
這種方式優(yōu)點(diǎn)就是代碼少，容易理解，瀏覽器幾乎都支持，出現(xiàn)的問(wèn)題比較少，但缺點(diǎn)就是如果頁(yè)面浮動(dòng)浮動(dòng)布局多的話，就要添加很多空div去清除浮動(dòng)，不便優(yōu)化。雖然這是常用的清除浮動(dòng)方式，但不建議使用
第二種方式：父容器使用overflow: auto;
使用這種方法，必須定義width或者zoom,而且不能設(shè)置高度height，優(yōu)點(diǎn)是代碼少，缺點(diǎn)是不能使用position,否則超出的元素將會(huì)被隱藏
第三種：父容器使用偽類:after跟zoom
這種方式是最推薦的，目前大多數(shù)大型網(wǎng)站都是使用這種方式清除浮動(dòng)，瀏覽器兼容好，不會(huì)出現(xiàn)什么奇怪的問(wèn)題。
zoom是IE專有屬性，可解決ie6,ie7浮動(dòng)問(wèn)題，IE8以上和非IE瀏覽器才支持偽類:after。
缺點(diǎn)就是代碼比較多，需要偽類:after跟zoom一起使用才能兼容所有主流瀏覽器。
但推薦使用，可將改樣式定義為公共樣式，減少代碼量
三種清除css浮動(dòng)的方式就是這樣。其實(shí)清除浮動(dòng)不止這三種，但這三種是比較常用的，最為推薦的就是最后一種。清除浮動(dòng)時(shí)，可根據(jù)當(dāng)前布局選擇最為合適的方式，不一定說(shuō)指定要用哪一種，最適合的就是最好的。
高度塌陷問(wèn)題
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{
/*為box1設(shè)置一個(gè)邊框*/
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
/*
* 在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，
* 也就是子元素多高，父元素就多高。
* 但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，
* 此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。
* 由于父元素的高度塌陷了，則父元素下的所有元素都會(huì)向上移動(dòng)，這樣將會(huì)導(dǎo)致頁(yè)面布局混亂。
*
* 所以在開發(fā)中一定要避免出現(xiàn)高度塌陷的問(wèn)題,
* 我們可以將父元素的高度寫死，以避免塌陷的問(wèn)題出現(xiàn)，
* 但是一旦高度寫死，父元素的高度將不能自動(dòng)適應(yīng)子元素的高度，所以這種方案是不推薦使用的。
*/
/*為子元素設(shè)置向左浮動(dòng)*/
float: left;
}
.box3{
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
