第七节 浮动
?
?
一. 浮動的性質
1. 脫標（脫離標準文檔流）
無論是塊級元素還是行內元素，一旦浮動了，就脫離標準文檔流（脫標）了，就可以設置寬和高了。
? ?下面事例是兩個div，其中第一個div浮動了。
?
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style type="text/css">7 *{8 margin: 0;9 padding: 0; 10 } 11 .box1 { 12 width: 200px; 13 height: 200px; 14 background-color: red; 15 float: left; 16 } 17 .box2 { 18 width: 400px; 19 height: 400px; 20 background-color: pink; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="box1"> 26 </div> 27 <div class="box2"> 28 </div> 29 </body> 30 </html>2. 浮動的元素相互貼靠
3. 浮動的元素有字圍效果
二. 清除浮動的方法
清除浮動的目的：讓父元素有高度，而且能隨著兒子的高度來自適應，并且不讓下面的同級元素占了自己的位置。
? ? ? 未清除浮動的案例：
?
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style type="text/css">7 *{8 margin: 0;9 padding: 0; 10 } 11 li { 12 width: 100px; 13 height: 40px; 14 background-color: pink; 15 float: left; 16 } 17 .box1 { 18 width: 700px; 19 border: 1px solid black; 20 } 21 .box2 { 22 width: 700px; 23 border: 1px solid black; 24 } 25 </style> 26 </head> 27 <body> 28 <!--結果第二個div里li去貼第一個div里的li了 且第一個div沒有高度--> 29 <div class="box1"> 30 <ul> 31 <li>我是小如</li> 32 <li>我是小如</li> 33 <li>我是小如</li> 34 <li>我是小如</li> 35 </ul> 36 </div> 37 <div class="box2"> 38 <ul> 39 <li>我是馬小如</li> 40 <li>我是馬小如</li> 41 <li>我是馬小如</li> 42 <li>我是馬小如</li> 43 <li>我是馬小如</li> 44 </ul> 45 </div> 46 </body> 47 </html>?
清除浮動方法一：加高法
給浮動的父元素加個高度，就可以關住浮動的元素了，但是實際工作中根本不可能這么用，不但麻煩，而且也不合理，該方法僅僅是為了幫助理解清除浮動的原理。
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style type="text/css">7 li {8 width: 100px;9 height: 40px; 10 background-color: pink; 11 float: left; 12 } 13 .box1{ 14 height: 50px; 15 } 16 </style> 17 </head> 18 <body> 19 <!--清除浮動方法一：給父親加高度--> 20 <div class="box1"> 21 <ul> 22 <li>我是小如</li> 23 <li>我是小如</li> 24 <li>我是小如</li> 25 <li>我是小如</li> 26 <li>我是小如</li> 27 </ul> 28 </div> 29 <div> 30 <ul> 31 <li>我是馬小如</li> 32 <li>我是馬小如</li> 33 <li>我是馬小如</li> 34 <li>我是馬小如</li> 35 <li>我是馬小如</li> 36 </ul> 37 </div> 38 </body> 39 </html>清除浮動方法二：給下面的父盒子加 clear:both?
clear:both法，表示自己內部的元素不受其他元素影響，但該方法有個弊端，就是margin失效。
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style type="text/css">7 li {8 width: 100px;9 height: 40px; 10 background-color: pink; 11 float: left; 12 } 13 .box2{ 14 clear: both; /*清除別人對我的影響*/ 15 margin-top: 40px; /*此種方法 margin失效*/ 16 } 17 </style> 18 </head> 19 <body> 20 <!--清除浮動方法二：clear:both--> 21 <div> 22 <ul> 23 <li>我是小如</li> 24 <li>我是小如</li> 25 <li>我是小如</li> 26 <li>我是小如</li> 27 <li>我是小如</li> 28 </ul> 29 </div> 30 <div class="box2"> 31 <ul> 32 <li>我是馬小如</li> 33 <li>我是馬小如</li> 34 <li>我是馬小如</li> 35 <li>我是馬小如</li> 36 <li>我是馬小如</li> 37 </ul> 38 </div> 39 </body> 40 </html>清除浮動方法三：隔墻法
? ??隔墻法，在兩部分浮動元素之間加一堵墻，使其相互不影響，但該方法依舊有缺陷，就是父元素依舊沒有高度，不能隨子元素的高度來自適應。
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style type="text/css">7 * {8 margin: 0;9 padding: 0; 10 } 11 li { 12 width: 100px; 13 height: 40px; 14 background-color: pink; 15 float: left; 16 } 17 .cl { 18 clear: both; 19 } 20 .h10{ 21 height: 10px; 22 } 23 </style> 24 </head> 25 <body> 26 <!--清除浮動方法三：隔墻法 缺點第一個div還是沒有高度，不能根據子元素的高度自動適應高度--> 27 <div> 28 <ul> 29 <li>我是小如</li> 30 <li>我是小如</li> 31 <li>我是小如</li> 32 <li>我是小如</li> 33 <li>我是小如</li> 34 </ul> 35 </div> 36 <div class="cl h10"></div> 37 <div> 38 <ul> 39 <li>我是馬小如</li> 40 <li>我是馬小如</li> 41 <li>我是馬小如</li> 42 <li>我是馬小如</li> 43 <li>我是馬小如</li> 44 </ul> 45 </div> 46 </body> 47 </html>清除浮動方法四：內墻法
? ??內墻法，在前一部分浮動元素中加一堵墻，可以使該部分的父親撐出高度，而且能根據子元素來自適應高度。
1 <!DOCTYPE html>2 <html>3 4 <head>5 <meta charset="UTF-8">6 <title></title>7 <style type="text/css">8 * {9 margin: 0; 10 padding: 0; 11 } 12 li { 13 width: 100px; 14 height: 40px; 15 background-color: pink; 16 float: left; 17 } 18 .cl { 19 clear: both; 20 } 21 .h10{ 22 height: 10px; 23 } 24 /*內墻法案例一*/ 25 .p1{ 26 float: left; 27 width: 50px; 28 height: 300px; 29 background-color: green; 30 } 31 .p2{ 32 float: left; 33 width: 60px; 34 height: 230px; 35 background-color: yellow; 36 } 37 .p3{ 38 float: left; 39 width: 60px; 40 height: 140px; 41 background-color: greenyellow; 42 } 43 .box1{ 44 border: 2px dashed black; 45 } 46 47 </style> 48 </head> 49 50 <body> 51 <!--清除浮動方法三：內墻法 本質：給沒有高的父親撐出高來--> 52 <div> 53 <ul> 54 <li>我是小如</li> 55 <li>我是小如</li> 56 <li>我是小如</li> 57 <li>我是小如</li> 58 <li>我是小如</li> 59 </ul> 60 <div class="cl h10"></div> 61 </div> 62 <div class="cl"> 63 <ul> 64 <li>我是馬小如</li> 65 <li>我是馬小如</li> 66 <li>我是馬小如</li> 67 <li>我是馬小如</li> 68 <li>我是馬小如</li> 69 </ul> 70 <div class="cl"></div> 71 </div> 72 <!--內墻法案例一 沒有高的box1盒子撐出來高--> 73 <div class="box1"> 74 <p class="p1"></p> 75 <p class="p2"></p> 76 <p class="p3"></p> 77 <div class="cl"></div> 78 </div> 79 </body> 80 </html>清除浮動方法五：overflow：hidden
???該方法是overflow的一個特性,并非本意，該方法能讓浮動的盒子被兒子撐出來高度，而且margin是有效的。
?
?
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style type="text/css">7 * {8 margin: 0;9 padding: 0; 10 } 11 li { 12 width: 100px; 13 height: 40px; 14 background-color: pink; 15 float: left; 16 } 17 .box1{ 18 overflow: hidden; 19 margin-bottom: 5px; 20 } 21 </style> 22 </head> 23 <body> 24 <!--清除浮動方法四：overflow: hidden 這個父親就能夠被浮動的兒子撐出高度了 能讓margin生效--> 25 <div class="box1"> 26 <ul> 27 <li>我是小如</li> 28 <li>我是小如</li> 29 <li>我是小如</li> 30 <li>我是小如</li> 31 <li>我是小如</li> 32 </ul> 33 </div> 34 <div> 35 <ul> 36 <li>我是馬小如</li> 37 <li>我是馬小如</li> 38 <li>我是馬小如</li> 39 <li>我是馬小如</li> 40 <li>我是馬小如</li> 41 </ul> 42 </div> 43 </body> 44 45 </html>清除浮動方法六：雙偽元素法（重點）
??該方法用的十分廣泛，京東網站清除浮動用的就是該方法，建議把相應代碼封裝到基礎css文件中，項目中直接引用即可。
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style type="text/css">7 * {8 margin: 0;9 padding: 0; 10 } 11 li { 12 width: 100px; 13 height: 60px; 14 background-color: pink; 15 float: left; 16 } 17 .box { 18 border: 1px solid black; 19 } 20 /*雙偽元素法*/ 21 .clearfix:before, 22 .clearfix:after { 23 display: table; 24 content: ""; 25 } 26 .clearfix:after { 27 clear: both; 28 } 29 .clearfix { 30 zoom: 1; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="box clearfix"> 36 <ul> 37 <li>我是小如</li> 38 <li>我是小如</li> 39 <li>我是小如</li> 40 <li>我是小如</li> 41 <li>我是小如</li> 42 </ul> 43 </div> 44 <div class="box clearfix"> 45 <ul> 46 <li>我是馬小如</li> 47 <li>我是馬小如</li> 48 <li>我是馬小如</li> 49 <li>我是馬小如</li> 50 <li>我是馬小如</li> 51 </ul> 52 </div> 53 </body> 54 </html>清除浮動方法七：偽元素法（重點）
??該方法同雙偽元素法一樣，用的十分廣泛，小米清除浮動用的就是該方法，建議把相應代碼封裝到基礎css文件中，項目中直接引用即可。
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style type="text/css">7 * {8 margin: 0;9 padding: 0; 10 } 11 li { 12 width: 100px; 13 height: 60px; 14 background-color: pink; 15 float: left; 16 } 17 .box { 18 border: 1px solid black; 19 } 20 /*偽元素法*/ 21 .clearfix:after { 22 content: ""; 23 visibility: hidden; 24 display: block; 25 height: 0; 26 clear: both; 27 } 28 .clearfix { 29 zoom: 1; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="box clearfix"> 35 <ul> 36 <li>我是小如</li> 37 <li>我是小如</li> 38 <li>我是小如</li> 39 <li>我是小如</li> 40 <li>我是小如</li> 41 </ul> 42 </div> 43 <div class="box clearfix"> 44 <ul> 45 <li>我是馬小如</li> 46 <li>我是馬小如</li> 47 <li>我是馬小如</li> 48 <li>我是馬小如</li> 49 <li>我是馬小如</li> 50 </ul> 51 </div> 52 </body> 53 </html>總結
- 上一篇： 李斌确认：蔚来将推20万级全新品牌 对标
- 下一篇： Microsoft Azure 中的 S