我的主要參考資料是[Object object]的文章
float 布局應該是目前各大網站用的最多的一種布局方式了，但是也特別復雜，這里詳細講一下
首先，什么是浮動？
浮動元素是脫離文檔流的，但不脫離文本流，這是什么意思呢，用過 word 的應該知道有一種圖片環繞的方式是文字環繞吧，就是這種效果。
浮動布局的兼容性比較好，但是浮動帶來的影響比較多，頁面寬度不夠的時候會影響布局。
例舉一個標准的浮動：
1 <style type="text/css"> 2 .wrap1{max-width: 1000px;} 3 div{ 4 min-height: 200px; 5 } 6 .left{ 7 float: left; 8 width: 300px; 9 background: red; 10 } 11 .right{ 12 float: right; 13 width: 300px; 14 background: blue; 15 } 16 .center{ 17 background: pink; 18 } 19 20 </style> 21 <div class="wrap1"> 22 <div class="left">left</div> 23 <div class="right">right</div> 24 <div class="center">浮動布局</div> <!-- 這里不能與上面的右浮動互換位置，否則會被塊元素擠下一行--> 25 </div>
效果如下：
那么它有什么特點呢
- 對自身的影響
- float 元素可以形成塊，如 span 元素。可以讓行內元素也擁有寬和高，因為塊級元素具有寬高
- 浮動元素的位置盡量靠上
- 盡量靠左（float:left）或右（float:right），如果那一行滿足不了浮動元素的寬度要求，則元素會往下掉
- 對兄弟元素的影響
- 不影響其他塊級元素的位置
- 影響其他塊級元素的文本
- 上面貼非 float 元素
- 旁邊貼 float 元素或者邊框
- 對父級元素的影響
- 從布局上 “消失”
- 高度塌陷
什么是高度塌陷，舉個例子吧
高度塌陷例子1：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS 布局</title> 6 </head> 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .container{ 13 width: 200px; 14 background-color:red; 15 } 16 17 .left{ 18 background-color: yellow; 19 float: left; /*float會將行元素轉變成塊元素display:inline-block;*/ 20 height: 50px; 21 width:50px; 22 } 23 .right{ 24 background-color: yellow; 25 float: right; /*float會將行元素轉變成塊元素display:inline-block;*/ 26 height: 50px; 27 width:50px; 28 } 29 </style> 30 <body> 31 <div class="container"> 32 <span class="left">left</span> 33 <span>center</span> 34 <span class="right">right</span> 35 </div> 36 <div class="container" style="height: 200px;background: blue"> 37 </div> 38 </body> 39 </html>
效果如下 ：
從圖中可以看出，兩個 float 元素雖然包含在第一個 container 中，但是卻超出了第一個 container 的范圍，在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。
但是當為子元素設置浮動以后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。
解決辦法有下面幾種
1.父元素設置 overflow: auto 或者 overflow: hidden
效果如下
2.給父元素加一個 after 偽類（清除浮動）
.container::after{ content:''; clear:both; display:block; visibility:hidden; height:0; }
效果如下
高度塌陷例子2：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS 布局</title> 6 </head> 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .container{ 13 width: 200px; 14 background-color:red; 15 } 16 17 .left{ 18 background-color: yellow; 19 float: left; /*float會將行元素轉變成塊元素display:inline-block;*/ 20 height: 50px; 21 width:50px; 22 } 23 .right{ 24 background-color: yellow; 25 float: right; /*float會將行元素轉變成塊元素display:inline-block;*/ 26 height: 50px; 27 width:50px; 28 } 29 </style> 30 <body> 31 <div class="container"> <!--將容器里的行元素span改為塊元素div--> 32 <div class="left">left</div> 33 <div class="center">center</div> 34 <div class="right">right</div> 35 </div> 36 <div class="container" style="height: 200px;background: blue"> 37 </div> 38 </body> 39 </html>
效果如下：
解決辦法給加上塊元素樣式清除浮動
1 .center{display: inline-block;} 2 .container::after{ 3 display: block; 4 content: ""; 5 clear: both; 6 }
即可實現效果如下：
1.設計一個兩欄布局
首先我們要明白為什么可以用 float 實現布局。其實上面的例子我們大概就可以看出來了，黃紅黃這不就是一個標准的三欄布局嗎。其實並沒有，我們看看下面的例子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS 布局</title> 6 </head> 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .container{ 13 width: 400px; 14 height: 200px; 15 margin: 10px auto; 16 } 17 18 .left{ 19 background-color: yellow; 20 float: left; 21 height: 100%; 22 width:100px; 23 } 24 .right{ 25 background-color: red; 26 height:100%; 27 } 28 </style> 29 <body> 30 <div class=container> 31 <div class=left></div> 32 <div class=right></div> 33 </div> 34 </body> 35 </html>
效果如下：
2.設計一個三欄布局
講完兩欄布局再講一下三欄布局，思路主要是左邊一個浮動元素，右邊一個浮動元素。這里有個小問題，中間的元素要寫在最后，因為中間元素假設有塊級元素的話，會影響右邊浮動元素的定位，這里演示一下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS 布局</title> 6 </head> 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .container{ 13 width: 400px; 14 height: 200px; 15 } 16 17 .left{ 18 background-color: yellow; 19 float: left; 20 height: 100%; 21 width:100px; 22 } 23 .right{ 24 background-color: green; 25 float: right; 26 height: 100%; 27 width:100px; 28 } 29 .middle{ 30 background-color: red; 31 margin-left: 100px; 32 margin-right: 100px; 33 height:100%; 34 } 35 .container::after{ 36 content: ''; 37 display: block; 38 visibility: hidden; 39 clear: both 40 } 41 42 </style> 43 <body> 44 <div class=container> 45 <div class="left"></div> 46 <div class="middle"></div> 47 <div class="right"></div> 48 </div> 49 </body> 50 </html>
效果如下：
因為浮動元素會把塊級元素的位置空出來，所以這里右邊的浮動元素把上面的位置空了下來，所以正確的寫法應該是：
1 <div class=container> 2 <div class="left"></div> 3 <div class="right"></div> <!-- 掉換了位置--> 4 <div class="middle"></div> 5 </div>
效果如下：
這樣我們就實現了最基本的三欄布局