（1）高度塌陷:
在文檔流中芹彬，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高叉庐，父元素就多高
但是當(dāng)為子元素設(shè)置浮動以后舒帮，子元素會完全脫離文檔流，此時將會導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷
由于父元素的高度塌陷了会前，則父元素下的所有元素都會向上移動好乐，這樣將會導(dǎo)致頁面布局混亂
所以在開發(fā)中一定要避免出現(xiàn)高度塌陷的問題,
我們可以將父元素的高度寫死，以避免塌陷的問題出現(xiàn)瓦宜，
但是一旦高度寫死蔚万，父元素的高度將不能自動適應(yīng)子元素的高度，所以這種方案是不推薦使用的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style type="text/css">
.box1{
border: 10px red solid;
height: 100px;
}
.box2{
width: 100px;
height: 100px;
background: blue;
float: left;
}
.box3{
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">a</div>
</div>
<div class="box3"></div>
</body>
</html>
(2)高度塌陷2:
根據(jù)W3C的標(biāo)準(zhǔn)临庇，在頁面中元素都一個隱含的屬性叫做Block Formatting Context（塊的格式化環(huán)境）簡稱BFC反璃，該屬性可以設(shè)置打開或者關(guān)閉慌闭，默認(rèn)是關(guān)閉的
當(dāng)開啟元素的BFC以后凉馆，元素將會具有如下的特性：
1.父元素的垂直外邊距不會和子元素重疊
2.開啟BFC的元素不會被浮動元素所覆蓋
3.開啟BFC的元素可以包含浮動的子元素
如何開啟元素的BFC
1.設(shè)置元素浮動
- 使用這種方式開啟交洗，雖然可以撐開父元素铺根，但是會導(dǎo)致父元素的寬度丟失，而且使用這種方式也會導(dǎo)致下邊的元素上移孽鸡，不能解決問題
2.設(shè)置元素絕對定位
3.設(shè)置元素為inline-block
- 可以解決問題萌业，但是會導(dǎo)致寬度丟失稚虎，不推薦使用這種方式
4.將元素的overflow設(shè)置為一個非visible的值
推薦方式：將overflow設(shè)置為hidden是副作用最小的開啟BFC的方式
但是在IE6及以下的瀏覽器中并不支持BFC侧蘸，所以使用這種方式不能兼容IE6
在IE6中雖然沒有BFC裁眯，但是具有另一個隱含的屬性叫做hasLayout，該屬性的作用和BFC類似讳癌，所在IE6瀏覽器可以通過開hasLayout來解決該問題
開啟方式很多穿稳，我們直接使用一種副作用最小的：
直接將元素的zoom設(shè)置為1即可
zoom表示放大的意思，后邊跟著一個數(shù)值晌坤，寫幾就將元素放大幾倍
zoom:1表示不放大元素逢艘，但是通過該樣式可以開啟hasLayout
zoom這個樣式，只在IE中支持骤菠，其他瀏覽器都不支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style type="text/css">
.box1{
border: 10px red solid;
/*height: 100px;*/
/*display: inline-block;*/
overflow: auto;
zoom: 1;
}
.box2{
width: 100px;
height: 100px;
background: blue;
float: left;
}
.box3{
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">a</div>
</div>
<div class="box3"></div>
</body>
</html>
(3)導(dǎo)航條;
在IE6中它改，如果為元素指定了一個寬度，則會默認(rèn)開啟hasLayou
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>導(dǎo)航條</title>
<style type="text/css">
*{
margin: 0px;
padding: 0;
}
.nav{
list-style: none;
background: red;
width: 1000px;
margin: 50px auto;
overflow: auto;
}
.nav li{
float: left;
width: 25%;
}
.nav a{
display: block;
width: 100%;
text-align: center;
padding: 5px 0;
text-decoration: none;
font-weight: bold;
background: orange;
color: white;
}
.nav a:hover{
background: red;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">聯(lián)系</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>
</body>
</html>
(4)清除浮動:
由于受到box1浮動的影響娩怎，box2整體向上移動了100px
我們有時希望清除掉其他元素浮動對當(dāng)前元素產(chǎn)生的影響搔课，這時可以使用clear來完成功能
可選值：
none胰柑，默認(rèn)值截亦，不清除浮動
left，清除左側(cè)浮動元素對當(dāng)前元素的影響
right柬讨，清除右側(cè)浮動元素對當(dāng)前元素的影響
both崩瓤，清除兩側(cè)浮動元素對當(dāng)前元素的影響
清除對他影響最大的那個元素的浮動
清除box1浮動對box2產(chǎn)生的影響
清除浮動以后，元素會回到其他元素浮動之前的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style type="text/css">
.box1{
width: 100px;
height: 300px;
background: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
background: yellow;
/*clear: left;*/
float: right;
}
.box3{
width: 300px;
height: 300px;
background: orange;
clear: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
(5)解決高度塌陷:
可以通過after偽類向元素的最后添加一個空白的塊元素踩官，然后對其清除浮動却桶，
這樣做和添加一個div的原理一樣，可以達(dá)到一個相同的效果，
而且不會在頁面中添加多余的div颖系，這是我們最推薦使用的方式嗅剖，幾乎沒有副作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解決高度塌陷</title>
<style type="text/css">
.box{
border: 1px solid red;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
.box1{
width: 100px;
height: 100px;
background: yellow;
float: left;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="box1"></div>
</div>
</body>
</html>
(6)解決高度塌陷2:
在IE6中不支持after偽類,所以在IE6中還需要使用hasLayout來處理
可以通過after偽類向元素的最后添加一個空白的塊元素，然后對其清除浮動嘁扼，
這樣做和添加一個div的原理一樣信粮，可以達(dá)到一個相同的效果，
而且不會在頁面中添加多余的div趁啸，這是我們最推薦使用的方式强缘，幾乎沒有副作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解決高度塌陷</title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.clearfix:after{
/*添加一個內(nèi)容*/
content: "";
/*轉(zhuǎn)換為一個塊元素*/
display: block;
/*清除兩側(cè)的浮動*/
clear: both;
}
.clearfix{
zoom: 1;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
(7)相對定位:
定位：
- 定位指的就是將指定的元素擺放到頁面的任意位置
通過定位可以任意的擺放元素
- 通過position屬性來設(shè)置元素的定位
-可選值：
static：默認(rèn)值，元素沒有開啟定位
relative：開啟元素的相對定位
absolute：開啟元素的絕對定位
fixed：開啟元素的固定定位（也是絕對定位的一種）
當(dāng)元素的position屬性設(shè)置為relative時不傅，則開啟了元素的相對定位
1.當(dāng)開啟了元素的相對定位以后旅掂，而不設(shè)置偏移量時，元素不會發(fā)生任何變化
2.相對定位是相對于元素在文檔流中原來的位置進(jìn)行定位
3.相對定位的元素不會脫離文檔流
4.相對定位會使元素提升一個層級
5.相對定位不會改變元素的性質(zhì)访娶，塊還是塊商虐，內(nèi)聯(lián)還是內(nèi)聯(lián)當(dāng)開啟了元素的定位（position屬性值是一個非static的值）時，可以通過left right top bottom四個屬性來設(shè)置元素的偏移量
left：元素相對于其定位位置的左側(cè)偏移量
right：元素相對于其定位位置的右側(cè)偏移量
top：元素相對于其定位位置的上邊的偏移量
bottom：元素相對于其定位位置下邊的偏移量
通常偏移量只需要使用兩個就可以對一個元素進(jìn)行定位崖疤，
一般選擇水平方向的一個偏移量和垂直方向的偏移量來為一個元素進(jìn)行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相對定位</title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background: red;
}
.box2{
width: 100px;
height: 100px;
background: blue;
position: relative;
left: 100px;
top: 100px;
left: 50px;
}
.box3{
width: 100px;
height: 100px;
background: green;
}
.s1{
width: 100px;
height: 100px;
background: orange;
position: relative;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="s1">as撒</span>
</body>
</html>
(8)絕對定位:
當(dāng)position屬性值設(shè)置為absolute時称龙，則開啟了元素的絕對定位
絕對定位：
1.開啟絕對定位，會使元素脫離文檔流
2.開啟絕對定位以后戳晌，如果不設(shè)置偏移量鲫尊，則元素的位置不會發(fā)生變化
3.絕對定位是相對于離他最近的、開啟了定位的祖先元素進(jìn)行定位的（一般情況沦偎，開啟了子元素的絕對定位疫向，都會同時開啟父元素的相對定位）
如果所有的祖先元素都沒有開啟定位，則會相對于瀏覽器窗口進(jìn)行定位
4.絕對定位會使元素提升一個層級
5.絕對定位會改變元素的性質(zhì)：
內(nèi)聯(lián)元素變成塊元素豪嚎，
塊元素的寬度和高度默認(rèn)都被內(nèi)容撐開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background: red;
}
.box2{
width: 100px;
height: 100px;
background: yellow;
position: relative;
left: 200px;
top: 0;
}
.box3{
width: 200px;
height: 200px;
background: orange;
}
.box4{
width: 100px;
height: 100px;
background: green;
position: relative;
}
.box5{
width: 100px;
height: 100px;
background: yellow;
position: relative;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box5">
<div class="box4">
<div class="box2"></div>
</div>
</div>
<div class="box3"></div>
</body>
</html>
開班情況
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>近期開班</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: 12x/1 微軟雅黑;
}
.box{
/*border: 1px solid red;*/
width: 310px;
margin: 50px auto;
}
.box1{
border-top: 2px #019e8b solid;
height: 36px;
background: #f5f5f5;
line-height: 36px;
padding: 0px 16px 0px 16px;
}
.box1 a{
float: right;
color: red;
}
.box1 h3{
font: 16px/36px "微軟雅黑";
}
.box2{
border: 1px solid #deddd9;
padding: 0px 28px 0px 20px;
}
.box2 a{
text-decoration: none;
font-size: 12px;
color: black;
}
.box a:hover{
text-decoration: underline;
color: red;
}
.box2 ul{
list-style: none;
border-bottom: 1px dashed #deddd9
}
.box2 h3{
margin-top: 15px;
margin-bottom: 15px;
}
.box li{
margin-bottom: 15px;
}
.box2 .red-font{
font-weight: bold;
color: red;
}
.box .ringt{
float: right;
}
.box2 .no-border{
border: none;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<a href="#">18年面授開班計劃</a>
<h3>近期開班</h3>
</div>
<div class="box2">
<h3><a href="#">人工智能+Python-高薪就業(yè)班</a></h3>
<ul>
<li>
<a class="ringt" href="#"><span class="red-font">預(yù)約報名</a></span>
<a href="#">開班時間:<span class="red-font">2018-04-26</a></span>
</li>
<li>
<a class="ringt" href="#"><span class="red-font">無座,名額飽滿</a></span>
<a href="#">開班時間:<span class="red-font">2018-03-23</a></span>
</li>
<li>
<a class="ringt" href="#">開班盛況</a>
<a href="#">開班時間:2018-01-23</a>
</li>
<li>
<a class="ringt" href="#">開班盛況</a>
<a href="#">開班時間:2017-12-20</a>
</li>
<li>
<a class="ringt" href="#">開班盛況</a>
<a href="#">開班時間:2017-11-18</a>
</li>
</ul>
<h3><a href="#">Android開發(fā)+測試-高薪就業(yè)班</a></h3>
<ul>
<li>
<a class="ringt" href="#"><span class="red-font">預(yù)約報名</a></span>
<a href="#">開班時間:<span class="red-font">2018-04-26</a></span>
</li>
<li>
<a class="ringt" href="#">開班盛況</a>
<a href="#">開班時間:2018-03-23</a>
</li>
<li>
<a class="ringt" href="#">開班盛況</a>
<a href="#">開班時間:2018-01-23</a>
</li>
<li>
<a class="ringt" href="#">開班盛況</a>
<a href="#">開班時間:2017-12-20</a>
</li>
</ul>
<h3><a href="#">大數(shù)據(jù)軟件開發(fā)-青芒工作室</a></h3>
<ul>
<li>
<a class="ringt" href="#"><span class="red-font">預(yù)約報名</a></span>
<a href="#">開班時間:<span class="red-font">2018-04-26</a></span>
</li>
<li>
<a class="ringt" href="#">開班盛況</a>
<a href="#">開班時間:2018-01-23</a>
</li>
</ul>
</div>
</body>
</html>
