首先！！！！这个问题应该是去面试前端会经常问到的问题！！！
如，下面这个例子：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>独秀不爱秀</title> <style type="text/css"> * { margin: 0; padding: 0; } .container { width: 1024px; height: 2000px; margin: 0 auto; } .container > div { display: inline-block; } .left { width: 80%; height: 100%; background-color: red; } .right { width: 20%; height: 100%; background-color: green; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
按照正常思维的话，这个.container容器分成了左右红色和绿色两个部分，但是运行之后却装不下这两个子元素.left 和 .right。
效果如下图所示：
想要解决这种现象有两个办法：
- 将两个div如下放置：（注意！！！虽然效果实现了，但是这样治标不治本，当自动格式化代码时又会回到原来的样子，显得麻烦）
<div class="container"> <div class="left"></div><div class="right"></div> </div>
- 给父容器.container 加上 font-size:0:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>独秀不爱秀</title> <style type="text/css"> * { margin: 0; padding: 0; } .container { width: 1024px; height: 2000px; margin: 0 auto; font-size: 0; } .container > div { display: inline-block; } .left { width: 80%; height: 100%; background-color: red; } .right { width: 20%; height: 100%; background-color: green; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
效果最终显示：
