浮动产生的问题

当父亲没有给宽高时，子盒子只要使用了浮动就会脱标，导致父盒子变小，做不到在商城页面展示商品的效果。（就是想让子盒子脱标了，即使用了浮动后，让父盒子的大小随着子盒子的多少和大小来改变。）

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>清除浮动</title>
  8.     <style>
  9.         .out{
  10.             width: 800px;
  11.             border-color: darkmagenta;
  12.             border-style: solid;
  13.             border-width: 2px;
  14.         }
  15.         .daMao{
  16.             background-color:burlywood;
  17.             width: 200px;
  18.             height: 200px;
  19.             margin: 0 auto;
  20.             float: left;
  21.         }
  23.         .erMao{
  24.             background-color:cornflowerblue;
  25.             width: 200px;
  26.             height: 200px;
  27.             margin: 0 auto;
  28.             float: left;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div class="out">
  34.         <div class="daMao">大毛</div>
  35.         <div class="erMao">二毛</div>
  36.     </div>
  37. </body>
  38. </html>

image.png
上述问题是由于子盒子脱标了导致父盒子没有了高度。