div+css布局，是前端開發人員的核心技能，在工作中占很大的比重。良好的前端布局是進行javascript書寫和互的基礎，足見布局的重要性，今天我們就講講css布局的基石-float。可以說，沒有浮動，就談不上布局了。

1、float的產生

互聯網產生從一開始到日漸壯大，期間借鑒了大量印刷排版的理念和技術，比如一開始互聯網的發明，就是將文檔電子化互相鏈接。

而後的table布局的發明，也是印刷專家完成的，直到css出現，依然可以看到印刷的影子，當然這也無可厚非，比如float的出現就是為了應對圖文並茂的排版出現的。

下面傳統的印刷排版常見的布局-文字環繞，就是float的常見應用場景之一。

我們看看如何實現，

<!DOCTYPE html>
<html lang="en">
?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width_=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS暗黑編年史</title>
<style>
img{
float:left;
}
</style>
</head>
?
<body>
<p>
<img src="https://jetorz.github.io/assets/Brendan-Eich.jpg" alt="" width="200">
在一個一個炎熱的下午，大家注意，一定要是炎熱的下午，為什麼要是炎熱的下午呢，因為天氣一熱，人就容易煩躁，人一煩躁就不想工作，不工作就想看片兒（注意看片兒不是看電影），但是你知道的越看片兒越煩躁，正在這個時候老闆娘進來來了，對js的作者布萊登·艾克說，小艾啊你看我們用貓上網的時候用戶名密碼填錯了結果等一兩分鐘返回結果的時候才知道是錯了，你看你能不能搞一個程序讓我在請求之前就知道我寫錯了，其實小艾心裡不想搞，但是大家都懂的，老闆好拒絕，老闆娘的需求是不好拒絕的，所以布萊登艾克心想趕緊隨便糊弄一下算了，片兒還沒看完呢，所以他就用了8天半（官方說）10天，其實另外的一天半被他用來看片兒了。大家懂的，你看片兒的時候有心思寫代碼嗎？所以js的bug如山一樣多，這個我們以後說。
</p>
</body>
</html>

2.float的經典場景

除了上面的經典用法之外，float還有幾個更複雜也更通用的場景，首先是整站布局。

代碼如下，

<!DOCTYPE html>
<html>
?
<head>
<style>
#header {
background-color: black;
color: white;
text-align: center;
padding: 5px;
}
?
#nav {
line-height: 30px;
background-color: #eeeeee;
height: 300px;
width: 100px;
float: left;
padding: 5px;
}
?
#section {
width: 350px;
float: left;
padding: 10px;
}
?
#footer {
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
</style>
</head>
?
<body>
?
<div id="header">
<h1>我是頭部</h1>
</div>
?
<div id="nav">
html教程<br>
css教程<br>
js教程<br>
</div>
?
<div id="section">
<h2>js暗黑編年史</h2>
<p>
在一個一個炎熱的下午，大家注意，一定要是炎熱的下午，為什麼要是炎熱的下午呢，因為天氣一熱，人就容易煩躁，人一煩躁就不想工作，不工作就想看片兒（注意看片兒不是看電影），但是你知道的越看片兒越煩躁，正在這個時候老闆娘進來來了，對js的作者布萊登·艾克說，小艾啊你看我們用貓上網的時候用戶名密碼填錯了結果等一兩分鐘返回結果的時候才知道是錯了，你看你能不能搞一個程序.
</p>

</div>
?
<div id="footer">
我是footer
</div>
</body>
</html>

還有類似淘寶的商品布局也很普遍：

實現代碼如下，

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width_=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div2{
background: red;
margin-right: 10px;
height: 300px;
}
#div3{
padding: 5px;
}
#div2,#div3{
float: left;
width:300px;

}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
?
</div>
<div id="div3">
<h3>我是標題</h3>
<p>我是一段描述的文字我是一段描述的文字我是一段描述的文字我是一段描述的文字</p>
</div>
</div>
</body>
</html>

3.float的常見問題

1.寬度不夠,會擠下來

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width_=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#wrap{
width:1000px;
margin: 0 auto;
}
div{
border:5px solid #000;
}
#left{
width:200px;
background:red;
height: 300px;
float: left;
}
#right{
width:800px;
background:green;
height: 300px;
float: left;
?
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">左側</div>
<div id="right">右側</div>
</div>
</body>
</html>

解決！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width_=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#wrap{
width:1000px;
margin: 0 auto;
border:5px solid yellow;
}
div{
border:5px solid #000;
}
#left{
width:200px;
background:red;
height: 300px;
float: left;
box-sizing: border-box;
}
#right{
width:800px;
background:green;
height: 300px;
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">左側</div>
<div id="right">右側</div>
</div>
</body>
</html>

如圖所示，大家會發現其實外層div的高度沒有撐開，這裡我不想解釋原因，扯什麼BFC啦，文檔流啦，為什麼？

編程就像學習騎自行車，你看過別人怎麼騎車，也知道踏板是用來蹬的，車座是用來座的，車把是用來掌握方向就夠了，你沒必要從一開始研究：

山地車30速對應的是：這個山地車的變速套件是由3片式牙盤和10片式飛輪組成，可以變換30種傳動比，也就是齒比。

詳細的解釋是：前面牙盤有三個盤，後面飛輪有10個，3x10就是30速，如果後面有9個飛輪就是27速，速別就是前面的盤的數量乘後面輪的數量，一般情況下前面都是三個盤，主要差距在於後面的小飛輪，常見的速別有18、21、24、27、30。

畢竟你不可能一開始學騎車就想著將來成為秋名山車神。

即使你學會這些，對於你學習騎車沒有什麼幫助，就像你即使知道了高度沒有撐起來是因為沒有觸發BFC，就算是你知道了文檔流和常規流，知道了float的默認值是none，對於你能流暢的布局有多少幫助呢？

我不是否認這些知識的價值，是要讓你懂得輕重緩急。畢竟如果你連最基礎的float布局都寫得磕磕絆絆，你研究那些有什麼意義呢？先把典型的布局記住，學會，用熟，然後再聊其他的。繼續第二個問題，

2.高度不夠，直接一句話，記住就好

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width_=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#wrap{
width:1000px;
margin: 0 auto;
border:5px solid yellow;
overflow: hidden;
}
div{
border:5px solid #000;
}
#left{
width:200px;
background:red;
height: 300px;
float: left;
box-sizing: border-box;
}
#right{
width:800px;
background:green;
height: 300px;
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">左側</div>
<div id="right">右側</div>
</div>
</body>
</html>

其實就一句話，

overflow: hidden;

先記住就好，等你長大了就明白了。

說第三個問題，

明顯footer位置不對，這是一個特性，float後面的元素會自動跟隨，並盡量靠上靠左。問題是明顯footer是不願意跟著右側元素混的，他應該在下面。怎麼弄？清除浮動。

<!DOCTYPE html>
<html lang="en">
?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width_=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#wrap {
width: 1000px;
margin: 0 auto;
border: 5px solid yellow;
overflow: hidden;
}
?
div {
border: 5px solid #000;
}
?
.main {
border: 0;
}
?
#left {
width: 200px;
background: red;
height: 400px;
float: left;
box-sizing: border-box;
}
?
#right {
width: 800px;
background: green;
height: 200px;
float: left;
box-sizing: border-box;
}
?
.clearFix:after {
content: ;
display: block;
clear: both;
}
?
.clearFix {
zoom: 1;
}
</style>
</head>
?
<body>
<div id="wrap">
<div class="main clearFix">
<div id="left">左側</div>
<div id="right">右側</div>
</div>
?
<div id="footer">我是帥氣的footer</div>
</div>
</body>
?
</html>

注意，這裡在left和right外麵包了一層div，然後添加了class。

.clearFix:after {
content: ;
display: block;
clear: both;
}
?
.clearFix {
zoom: 1;
}

這裡你不會都沒關係，先記住會用就好。記住代碼就像騎自行車，騎得多了自然就知道怎麼騎了，熟練了以後再去騎山地車，公路車，入門就會很快。

目前你已經掌握了float的基礎入門，走起吧！

推薦閱讀：

相关文章