一杈抢、浮動(dòng)
- 塊元素在文檔流中默認(rèn)垂直排列印叁，所以這個(gè)三個(gè)div自上至下依次排開
- 如果希望塊元素在頁面中水平排列曹仗，可以使塊元素脫離文檔流使用float來使元素浮動(dòng)榨汤，從而脫離文檔流
- 可選值：
1 none，默認(rèn)值怎茫，元素默認(rèn)在文檔流中排列
2 left收壕，元素會(huì)立即脫離文檔流，向頁面的左側(cè)浮動(dòng)
3 right，元素會(huì)立即脫離文檔流蜜宪，向頁面的右側(cè)浮動(dòng) - 當(dāng)為一個(gè)元素設(shè)置浮動(dòng)以后（float屬性是一個(gè)非none的值）虫埂，元素會(huì)立即脫離文檔流，元素脫離文檔流以后圃验，它下邊的元素會(huì)立即向上移動(dòng)元素浮動(dòng)以后掉伏，會(huì)盡量向頁面的左上或這是右上漂浮，直到遇到父元素的邊框或者其他的浮動(dòng)元素
- 如果浮動(dòng)元素上邊是一個(gè)沒有浮動(dòng)的塊元素损谦，則浮動(dòng)元素不會(huì)超過塊元素
<style type="text/css">
.box1{
width: 600px;
height: 200px;
background-color: red;
float: left;
}
</style>
二岖免、文字繞圖
浮動(dòng)的元素不會(huì)蓋住文字岳颇，文字會(huì)自動(dòng)環(huán)繞在浮動(dòng)元素的周圍照捡，所以我們可以通過浮動(dòng)來設(shè)置文字環(huán)繞圖片的效果
<style type="text/css">
.box1{
width: 600px;
height: 200px;
background-color: red;
float: left;
}
.p1{
/*height: 200px;*/
background-color: yellow;
}
</style>
三、內(nèi)聯(lián)元素的浮動(dòng)
- 在文檔流中话侧，子元素的寬度默認(rèn)占父元素的全部
- 當(dāng)元素這只浮動(dòng)以后栗精，會(huì)完全脫離文檔流
- 塊元素脫離文檔流后，寬度和高度都會(huì)被內(nèi)容撐開
- 內(nèi)聯(lián)元素脫離文檔流后會(huì)成為塊元素
<style type="text/css">
p{
float: left;
width: 100px;
height: 100px;
background-color: yellow;
</style>
四瞻鹏、高度塌陷及解決辦法
導(dǎo)讀塌陷:在文檔流中悲立，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高新博，父元素就多高但是當(dāng)為子元素設(shè)置浮動(dòng)以后薪夕，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度赫悄，導(dǎo)致父元素的高度塌陷由于父元素的高度塌陷了原献，則父元素下的所有元素都會(huì)向上移動(dòng)，這樣將會(huì)導(dǎo)致頁面布局混亂所以在開發(fā)中一定要避免出現(xiàn)高度塌陷的問題,
- 解決辦法1
我們可以將父元素的高度寫死埂淮，以避免塌陷的問題出現(xiàn)姑隅，但是一旦高度寫死，父元素的高度將不能自動(dòng)適應(yīng)子元素的高度倔撞，所以這種方案是不推薦使用的
<style type="text/css">
.box1{
/*為box1設(shè)置一個(gè)邊框*/
border: 10px red solid;
height: 100px;}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;}
</style>
- 解決方法2
根據(jù)W3C的標(biāo)準(zhǔn)讲仰，在頁面中元素都一個(gè)隱含的屬性叫做Block Formatting Context（塊的格式化環(huán)境）簡稱BFC，該屬性可以設(shè)置打開或者關(guān)閉痪蝇，默認(rèn)是關(guān)閉的
當(dāng)開啟元素的BFC以后鄙陡，元素將會(huì)具有如下的特性：
1.父元素的垂直外邊距不會(huì)和子元素重疊
2.開啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋
3.開啟BFC的元素可以包含浮動(dòng)的子元素
如何開啟元素的BFC
1.設(shè)置元素浮動(dòng)
- 使用這種方式開啟，雖然可以撐開父元素躏啰，但是會(huì)導(dǎo)致父元素的寬度丟失柔吼，而且使用這種方式也會(huì)導(dǎo)致下邊的元素上移，不能解決問題
2.設(shè)置元素絕對(duì)定位
3.設(shè)置元素為inline-block
- 可以解決問題丙唧，但是會(huì)導(dǎo)致寬度丟失愈魏，不推薦使用這種方式
4.將元素的overflow設(shè)置為一個(gè)非visible的值
推薦方式：將overflow設(shè)置為hidden是副作用最小的開啟BFC的方式
<style type="text/css">
.box1{
overflow: hidden;}
</style>
- 解決方法3
可以直接在高度塌陷的父元素的最后，添加一個(gè)空白的div，由于這個(gè)div并沒有浮動(dòng)培漏，所以他是可以撐開父元素的高度的然后再對(duì)其進(jìn)行清除浮動(dòng)溪厘，這樣可以通過這個(gè)空白的div來撐開父元素的高度，基本沒有副作用使用這種方式雖然可以解決問題牌柄，但是會(huì)在頁面中添加多余的結(jié)構(gòu)
<style type="text/css">
.box1{
clear: both;} 這里還可以寫left和right單清除一邊 bonth是兩邊同時(shí)清除
</style>
<div class="box1"><div>
- 解決方法4
通過after偽類畸悬，選中box1的后邊可以通過after偽類向元素的最后添加一個(gè)空白的塊元素，然后對(duì)其清除浮動(dòng)珊佣，這樣做和添加一個(gè)div的原理一樣蹋宦，可以達(dá)到一個(gè)相同的效果，而且不會(huì)在頁面中添加多余的div咒锻，這是我們最推薦使用的方式冷冗，幾乎沒有副作用
<style type="text/css">
.box1:after{
/*添加一個(gè)內(nèi)容*/
content: "";
/*轉(zhuǎn)換為一個(gè)塊元素*/
display: block;
/*清除兩側(cè)的浮動(dòng)*/
clear: both;
}
</style>
<div class="box1"><div>
五、定位
定位指的就是將指定的元素?cái)[放到頁面的任意位置通過定位可以任意的擺放元素通過position屬性來設(shè)置元素的定位
可選值：
static：默認(rèn)值惑艇，元素沒有開啟定位
relative：開啟元素的相對(duì)定位
absolute：開啟元素的絕對(duì)定位
fixed：開啟元素的固定定位（也是絕對(duì)定位的一種）
- 相對(duì)定位
1.當(dāng)開啟了元素的相對(duì)定位以后蒿辙，而不設(shè)置偏移量時(shí)，元素不會(huì)發(fā)生任何變化
2.相對(duì)定位是相對(duì)于元素在文檔流中原來的位置進(jìn)行定位
3.相對(duì)定位的元素不會(huì)脫離文檔流
4.相對(duì)定位會(huì)使元素提升一個(gè)層級(jí)
5.相對(duì)定位不會(huì)改變?cè)氐男再|(zhì)滨巴，塊還是塊思灌，內(nèi)聯(lián)還是內(nèi)聯(lián)
<style type="text/css">
當(dāng)開啟了元素的定位（position屬性值是一個(gè)非static的值）時(shí)，可以通過left right top bottom四個(gè)屬性來設(shè)置元素的偏移量
一般選擇水平方向的一個(gè)偏移量和垂直方向的偏移量來為一個(gè)元素進(jìn)行定位
.box1{
position: relative;
left: 100px;
top: 200px;
}
</style>
<div class="box1"><div>
- 絕對(duì)定位
1.開啟絕對(duì)定位恭取，會(huì)使元素脫離文檔流
2.開啟絕對(duì)定位以后泰偿，如果不設(shè)置偏移量，則元素的位置不會(huì)發(fā)生變化
3.絕對(duì)定位是相對(duì)于離他最近的蜈垮、開啟了定位的祖先元素進(jìn)行定位的（一般情況耗跛，開啟了子元素的絕對(duì)定位，都會(huì)同時(shí)開啟父元素的相對(duì)定位窃款，如果所有的祖先元素都沒有開啟定位课兄，則會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位
4.絕對(duì)定位會(huì)使元素提升一個(gè)層級(jí)
5.絕對(duì)定位會(huì)改變?cè)氐男再|(zhì)：內(nèi)聯(lián)元素變成塊元素，塊元素的寬度和高度默認(rèn)都被內(nèi)容撐開
<style type="text/css">
.box{width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
}
.box1{
position: absolute;
left: 100px;
top: 100px;
}
</style>
<div class ="box"></div>
<div class="box1"><div>
- 固定定位
當(dāng)元素的position屬性設(shè)置fixed時(shí)晨继，則開啟了元素的固定定位固定定位也是一種絕對(duì)定位烟阐，它的大部分特點(diǎn)都和絕對(duì)定位一樣
不同的是：固定定位永遠(yuǎn)都會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位
固定定位會(huì)固定在瀏覽器窗口某個(gè)位置，不會(huì)隨滾動(dòng)條滾動(dòng)
IE6不支持固定定位
<style type="text/css">
.box{width: 200px;
height: 200px;
background-color: yellow;
position: fixed;
left: 0px;
top: 0px;
}
</style>
<div class ="box"></div>
<div class="box1"><div
