前言：网上有很多很好的例子，我这里只是记下自己的理解和感悟
先看下浮动：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>第一种</title> 6 <style> 7 #box { 8 border: solid; 9 } 10 11 .con { 12 float: left; 13 width: 100px; 14 height: 100px; 15 } 16 17 .con1 { 18 background: red; 19 } 20 21 .con2 { 22 background: green; 23 } 24 25 .con3 { 26 background: blue; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="box"> 32 <div class="con con1"></div> 33 <div class="con con2"></div> 34 <div class="con con3"></div> 35 </div> 36 </body> 37 </html>
效果：
如图，子元素跑到父级元素外面去了（大逆不道 ！）
下面我就替天行道，
劝说：（不常用）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>第一种</title> 6 <style> 7 #box { 8 border: solid; 9 } 10 11 .con { 12 float: left; 13 width: 100px; 14 height: 100px; 15 } 16 17 .con1 { 18 background: red; 19 } 20 21 .con2 { 22 background: green; 23 } 24 25 .con3 { 26 background: blue; 27 } 28 29 .clear { 30 clear: both; 31 } 32 </style> 33 </head> 34 <body> 35 <div id="box"> 36 <div class="con con1"></div> 37 <div class="con con2"></div> 38 <div class="con con3"></div> 39 <div class="clear"></div> 40 </div> 41 </body> 42 </html>
效果：
告诉他们父亲：（难以实现下面图片的效果，头像溢出了，隐藏就没了╮(╯▽╰)╭）
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>第一种</title> 6 <style> 7 #box { 8 border: solid; 9 overflow: hidden; 10 } 11 12 .con { 13 float: left; 14 width: 100px; 15 height: 100px; 16 } 17 18 .con1 { 19 background: red; 20 } 21 22 .con2 { 23 background: green; 24 } 25 26 .con3 { 27 background: blue; 28 } 29 30 </style> 31 </head> 32 <body> 33 <div id="box"> 34 <div class="con con1"></div> 35 <div class="con con2"></div> 36 <div class="con con3"></div> 37 </div> 38 </body> 39 </html>
直接硬扛：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>第一种</title> 6 <style> 7 #box { 8 border: solid; 9 zoom: 1; 10 /*处理兼容*/ 11 } 12 13 #box:after{ 14 clear: both; 15 content: "."; 16 display: block; 17 width: 0; 18 height: 0; 19 visibility: hidden; 20 } 21 22 .con { 23 float: left; 24 width: 100px; 25 height: 100px; 26 } 27 28 .con1 { 29 background: red; 30 } 31 32 .con2 { 33 background: green; 34 } 35 36 .con3 { 37 background: blue; 38 } 39 40 </style> 41 </head> 42 <body> 43 <div id="box"> 44 <div class="con con1"></div> 45 <div class="con con2"></div> 46 <div class="con con3"></div> 47 </div> 48 </body> 49 </html>