浮動(float)
CSS 提供了 3 種機(jī)制來設(shè)置盒子的擺放位置，分別是普通流（標(biāo)準(zhǔn)流）、浮動和定位，其中：
普通流（標(biāo)準(zhǔn)流）
- 塊級元素會獨(dú)占一行，從上向下順序排列；常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行內(nèi)元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行；
常用元素：span、a、i、em等
浮動
讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示。
定位
將盒子定在瀏覽器的某一個位置——CSS 離不開定位，特別是后面的 js 特效。
雖然我們前面學(xué)過行內(nèi)塊（inline-block） 但是他卻有自己的缺陷：
- 它可以實(shí)現(xiàn)多個元素一行顯示，但是中間會有空白縫隙
- 它不能實(shí)現(xiàn)左青龍右白虎的布局 盒子左右對齊
浮動(float)
概念：元素的浮動是指設(shè)置了浮動屬性的元素會
- 脫離標(biāo)準(zhǔn)普通流的控制
- 移動到指定位置。
作用 - 讓多個盒子(div)水平排列成一行，使得浮動成為布局的重要手段。
- 可以實(shí)現(xiàn)盒子的左右對齊等等..
- 浮動最早是用來控制圖片，實(shí)現(xiàn)文字環(huán)繞圖片的效果。
浮動布局實(shí)現(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)的擴(kuò)展
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>
image
2). 浮動元素與兄弟盒子的關(guān)系
在一個父級盒子中，如果前一個兄弟盒子是：
- 浮動的，那么當(dāng)前盒子會與前一個盒子的頂部對齊；
- 普通流的，那么當(dāng)前盒子會顯示在前一個兄弟盒子的下方。
float: left;
width: 100px;
height: 100px;
background-color: red;
清除浮動
為什么要清除浮動
因?yàn)楦讣壓凶雍芏嗲闆r下，不方便給高度，但是子盒子浮動就不占有位置，最后父級盒子高度為0，就影響了下面的標(biāo)準(zhǔn)流盒子
image
image
- 由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產(chǎn)生影響
- 準(zhǔn)確地說，并不是清除浮動，而是清除浮動后造成的影響
浮動本質(zhì)
清除浮動主要為了解決父級元素因?yàn)樽蛹壐右饍?nèi)部高度為0 的問題。清除浮動之后， 父級就會根據(jù)浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標(biāo)準(zhǔn)流了
清除浮動的方法
在CSS中，clear屬性用于清除浮動
- 額外標(biāo)簽法(隔墻法)
選擇器{clear:屬性值;} clear 清除
image
image
image
優(yōu)點(diǎn)： 通俗易懂，書寫方便
缺點(diǎn)： 添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差
父級添加overflow屬性方法
可以給父級添加： overflow為 hidden| auto| scroll 都可以實(shí)現(xiàn)。
優(yōu)點(diǎn)： 代碼簡潔
缺點(diǎn)： 內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。
使用after偽元素清除浮動
:after 方式為空元素額外標(biāo)簽法的升級版，好處是不用單獨(dú)加標(biāo)簽了
使用方法：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
- 優(yōu)點(diǎn)： 符合閉合浮動思想 結(jié)構(gòu)語義化正確
- 缺點(diǎn)： 由于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)點(diǎn)： 代碼更簡潔
缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
-
代表網(wǎng)站： 小米、騰訊
