<meta charset="utf-8">
<article class="_2rhmJa">
浮動(float)
CSS 提供了 3 種機制來設(shè)置盒子的擺放位置，分別是普通流（標準流）胡陪、浮動和定位梭稚，其中：
普通流（標準流）
- 塊級元素會獨占一行，從上向下順序排列袜啃；常用元素：div、hr、p、h1~h6径玖、ul、ol谒养、dl挺狰、form、table
- 行內(nèi)元素會按照順序买窟，從左到右順序排列，碰到父元素邊緣則自動換行薯定；
常用元素：span始绍、a、i话侄、em等
浮動
讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示亏推。
定位
將盒子定在瀏覽器的某一個位置——CSS 離不開定位，特別是后面的 js 特效年堆。
雖然我們前面學(xué)過行內(nèi)塊（inline-block） 但是他卻有自己的缺陷：
- 它可以實現(xiàn)多個元素一行顯示吞杭，但是中間會有空白縫隙
- 它不能實現(xiàn)左青龍右白虎的布局 盒子左右對齊
浮動(float)
概念：元素的浮動是指設(shè)置了浮動屬性的元素會
- 脫離標準普通流的控制
- 移動到指定位置。
作用 - 讓多個盒子(div)水平排列成一行变丧，使得浮動成為布局的重要手段芽狗。
- 可以實現(xiàn)盒子的左右對齊等等..
- 浮動最早是用來控制圖片，實現(xiàn)文字環(huán)繞圖片的效果痒蓬。
浮動布局實現(xiàn)三個盒子在一個水平線上挨著
<!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>
浮動(float)的擴展
1). 浮動元素與父盒子的關(guān)系
- 子盒子的浮動參照父盒子對齊
- 不會與父盒子的邊框重疊童擎，也不會超過父盒子的內(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). 浮動元素與兄弟盒子的關(guān)系
在一個父級盒子中，如果前一個兄弟盒子是：
- 浮動的攻晒，那么當(dāng)前盒子會與前一個盒子的頂部對齊顾复；
- 普通流的，那么當(dāng)前盒子會顯示在前一個兄弟盒子的下方鲁捏。
float: left;
width: 100px;
height: 100px;
background-color: red;
清除浮動
為什么要清除浮動
因為父級盒子很多情況下芯砸，不方便給高度，但是子盒子浮動就不占有位置，最后父級盒子高度為0假丧，就影響了下面的標準流盒子
- 由于浮動元素不再占用原文檔流的位置末购，所以它會對后面的元素排版產(chǎn)生影響
- 準確地說，并不是清除浮動虎谢，而是清除浮動后造成的影響
浮動本質(zhì)
清除浮動主要為了解決父級元素因為子級浮動引起內(nèi)部高度為0 的問題盟榴。清除浮動之后， 父級就會根據(jù)浮動的子盒子自動檢測高度婴噩。父級有了高度擎场，就不會影響下面的標準流了
清除浮動的方法
在CSS中，clear屬性用于清除浮動
- 額外標簽法(隔墻法)
選擇器{clear:屬性值;} clear 清除
優(yōu)點： 通俗易懂几莽，書寫方便
缺點： 添加許多無意義的標簽迅办，結(jié)構(gòu)化較差
父級添加overflow屬性方法
可以給父級添加： overflow為 hidden| auto| scroll 都可以實現(xiàn)。
優(yōu)點： 代碼簡潔
缺點： 內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉章蚣，無法顯示需要溢出的元素站欺。
使用after偽元素清除浮動
:after 方式為空元素額外標簽法的升級版，好處是不用單獨加標簽了
使用方法：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
- 優(yōu)點： 符合閉合浮動思想 結(jié)構(gòu)語義化正確
- 缺點： 由于IE6-7不支持:after纤垂，使用 zoom:1觸發(fā) hasLayout矾策。
- 代表網(wǎng)站： 百度、淘寶網(wǎng)峭沦、網(wǎng)易等
4).使用雙偽元素清除浮動
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優(yōu)點： 代碼更簡潔
缺點： 由于IE6-7不支持:after贾虽，使用 zoom:1觸發(fā) hasLayout。
-
代表網(wǎng)站： 小米吼鱼、騰訊
