1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style> 8 .wrapper{ 9 border: 20px solid black; 10 } 11 .content{ 12 float: left; 13 width: 100px; 14 height: 100px; 15 background-color: #bbb; 16 color: black; 17 font-size: 50px; 18 margin-left: 20px; 19 margin-bottom: 20px; 20 line-height: 100px; 21 text-align: center; 22 } 23 </style> 24 <body> 25 <div class="wrapper"> 26 <div class="content">1</div> 27 <div class="content">2</div> 28 <div class="content">3</div> 29 <div class="content">4</div> 30 <div class="content">5</div> 31 <div class="content">6</div> 32 <div class="content">7</div> 33 <div class="content">8</div> 34 </div> 35 </body> 36 </html>
顯示效果如下圖
由於方塊元素產生了浮動流，所以外面的wrapper無法包裹里面的元素，如何做到清除浮動流，讓wrapper包裹里面的元素呢，形成如下圖形？下面介紹幾種方法。
方法1：在content的最后一個元素后面添加一個塊元素（p div ul li ol form address），塊元素上添加clear。
不足：雖然能夠滿足要求，但是由於引入了新的元素（標簽）破壞了整體的結構，所以不推薦。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .wrapper{ border: 20px solid black; } .content{ float: left; width: 100px; height: 100px; background-color: #bbb; color: black; font-size: 50px; margin-left: 20px; margin-bottom: 20px; line-height: 100px; text-align: center; } p{ clear: both; } </style> <body> <div class="wrapper"> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">4</div> <div class="content">5</div> <div class="content">6</div> <div class="content">7</div> <div class="content">8</div> <p></p> </div> </body> </html>
方法2：利用偽元素清除浮動流
思考：為什么不能利用content上的偽元素清除浮動流。
偽元素after是內容的最后部分，如果利用content偽元素after只能清除content內容的浮動流，無法清除content后的浮動流，所以沒法達到目的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .wrapper{ border: 20px solid black; } .content{ float: left; width: 100px; height: 100px; background-color: #bbb; color: black; font-size: 50px; margin-left: 20px; margin-bottom: 20px; line-height: 100px; text-align: center; } .wrapper::after{ content: ""; clear: both; display: block; } </style> <body> <div class="wrapper"> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">4</div> <div class="content">5</div> <div class="content">6</div> <div class="content">7</div> <div class="content">8</div> </div> </body> </html>
方法3：讓wrapper觸發BFC，觸發BFC的方法有如下三種。
float：left/right
position:absolute;
display:inline-block;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .wrapper{ float: left; /*position: absolute;*/ /*display: inline-block;*/ border: 20px solid black; } .content{ float: left; width: 100px; height: 100px; background-color: #bbb; color: black; font-size: 50px; margin-left: 20px; margin-bottom: 20px; line-height: 100px; text-align: center; } </style> <body> <div class="wrapper"> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">4</div> <div class="content">5</div> <div class="content">6</div> <div class="content">7</div> <div class="content">8</div> </div> </body> </html>