huanggr
在web前端技术中，最基础的就是布局了，布局简单分为flex弹性盒模型布局（省去了清浮动的操作），以及div布局，那么我们在布局的过程中，就会使用到浮动，也就是float，那么我们如何处理董呢，接下来，我就介绍几种方法：
方法一、父级也浮动
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!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> * { margin: 0; padding: 0; } .main { width: 300px; height: auto; background: yellow; margin: 300px auto; float: left; } .box { width: 33.33%; height: 100px; box-sizing: border-box; border: 1px solid red; float: left; } </style> </head> <body> <div class="main"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html> |
弊端：左右的margin:0 auto; 会失效；
方法二、父级加display:inline-block
1 |
方法二、给父级加高
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!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> * { margin: 0; padding: 0; } .main { width: 300px; background: yellow; margin: 300px auto; height: 100px; } .box { width: 33.33%; height: 100px; box-sizing: border-box; border: 1px solid red; float: left; } </style> </head> <body> <div class="main"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html> |
434134123423444
未完待续……
显示