浮動(dòng)(float)
CSS 提供了 3 種機(jī)制來(lái)設(shè)置盒子的擺放位置然爆，分別是普通流（標(biāo)準(zhǔn)流）、浮動(dòng)和定位，其中：
普通流（標(biāo)準(zhǔn)流）
- 塊級(jí)元素會(huì)獨(dú)占一行包各，從上向下順序排列；常用元素：div靶庙、hr问畅、p、h1~h6六荒、ul护姆、ol、dl掏击、form卵皂、table
- 行內(nèi)元素會(huì)按照順序，從左到右順序排列砚亭，碰到父元素邊緣則自動(dòng)換行渐裂；
常用元素：span、a钠惩、i柒凉、em等
浮動(dòng)
讓盒子從普通流中浮起來(lái),主要作用讓多個(gè)塊級(jí)盒子一行顯示。
定位
將盒子定在瀏覽器的某一個(gè)位置——CSS 離不開(kāi)定位篓跛，特別是后面的 js 特效膝捞。
雖然我們前面學(xué)過(guò)行內(nèi)塊（inline-block） 但是他卻有自己的缺陷：
- 它可以實(shí)現(xiàn)多個(gè)元素一行顯示，但是中間會(huì)有空白縫隙
- 它不能實(shí)現(xiàn)左青龍右白虎的布局 盒子左右對(duì)齊
浮動(dòng)(float)
概念：元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)
- 脫離標(biāo)準(zhǔn)普通流的控制
- 移動(dòng)到指定位置。
作用 - 讓多個(gè)盒子(div)水平排列成一行蔬咬，使得浮動(dòng)成為布局的重要手段鲤遥。
- 可以實(shí)現(xiàn)盒子的左右對(duì)齊等等..
- 浮動(dòng)最早是用來(lái)控制圖片，實(shí)現(xiàn)文字環(huán)繞圖片的效果林艘。
浮動(dòng)布局實(shí)現(xiàn)三個(gè)盒子在一個(gè)水平線上挨著
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one,
.two{
width: 100px;
height: 100px;
background-color: yellowgreen;
}
.one{
float: left;
/*width: 200px;*/
/*height: 200px;*/
/*border: 1px solid red;*/
}
.two{
background-color: pink;
float: left;
}
.three {
width: 100px;
height: 100px;
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
浮動(dòng)(float)的擴(kuò)展
1). 浮動(dòng)元素與父盒子的關(guān)系
- 子盒子的浮動(dòng)參照父盒子對(duì)齊
- 不會(huì)與父盒子的邊框重疊盖奈，也不會(huì)超過(guò)父盒子的內(nèi)邊距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 300px;
height: 300px;
background-color: skyblue;
border: 20px solid red;
padding: 20px;
}
.son{
float: right;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2). 浮動(dòng)元素與兄弟盒子的關(guān)系
在一個(gè)父級(jí)盒子中，如果前一個(gè)兄弟盒子是：
- 浮動(dòng)的狐援，那么當(dāng)前盒子會(huì)與前一個(gè)盒子的頂部對(duì)齊钢坦；
- 普通流的，那么當(dāng)前盒子會(huì)顯示在前一個(gè)兄弟盒子的下方啥酱。
float: left;
width: 100px;
height: 100px;
background-color: red;
清除浮動(dòng)
為什么要清除浮動(dòng)
因?yàn)楦讣?jí)盒子很多情況下爹凹，不方便給高度，但是子盒子浮動(dòng)就不占有位置镶殷，最后父級(jí)盒子高度為0禾酱，就影響了下面的標(biāo)準(zhǔn)流盒子
- 由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)后面的元素排版產(chǎn)生影響
- 準(zhǔn)確地說(shuō)绘趋，并不是清除浮動(dòng)颤陶，而是清除浮動(dòng)后造成的影響
浮動(dòng)本質(zhì)
清除浮動(dòng)主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0 的問(wèn)題。清除浮動(dòng)之后陷遮， 父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度滓走。父級(jí)有了高度，就不會(huì)影響下面的標(biāo)準(zhǔn)流了
清除浮動(dòng)的方法
在CSS中拷呆，clear屬性用于清除浮動(dòng)
- 額外標(biāo)簽法(隔墻法)
選擇器{clear:屬性值;} clear 清除
優(yōu)點(diǎn)： 通俗易懂闲坎，書(shū)寫(xiě)方便
缺點(diǎn)： 添加許多無(wú)意義的標(biāo)簽疫粥，結(jié)構(gòu)化較差
父級(jí)添加overflow屬性方法
可以給父級(jí)添加： overflow為 hidden| auto| scroll 都可以實(shí)現(xiàn)茬斧。
優(yōu)點(diǎn)： 代碼簡(jiǎn)潔
缺點(diǎn)： 內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示需要溢出的元素梗逮。
使用after偽元素清除浮動(dòng)
:after 方式為空元素額外標(biāo)簽法的升級(jí)版项秉，好處是不用單獨(dú)加標(biāo)簽了
使用方法：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
- 優(yōu)點(diǎn)： 符合閉合浮動(dòng)思想 結(jié)構(gòu)語(yǔ)義化正確
- 缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout慷彤。
- 代表網(wǎng)站： 百度娄蔼、淘寶網(wǎng)、網(wǎng)易等
4).使用雙偽元素清除浮動(dòng)
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優(yōu)點(diǎn)： 代碼更簡(jiǎn)潔
缺點(diǎn)： 由于IE6-7不支持:after底哗，使用 zoom:1觸發(fā) hasLayout岁诉。
-
代表網(wǎng)站： 小米、騰訊
image
