13_解决浮动问题.html 921 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. .box{
  9. border: 2px solid black;
  10. width: 300px;
  11. /* height: 300px; */
  12. margin: 0 auto;
  13. }
  14. .box2{
  15. width: 100px;
  16. height: 100px;
  17. border:2px solid blue;
  18. }
  19. .box3{
  20. width: 100px;
  21. height: 100px;
  22. border:2px solid red;
  23. }
  24. .box2,.box3{
  25. float: left;
  26. }
  27. p{
  28. clear: both;
  29. }
  30. /* span{
  31. clear: both;
  32. } */
  33. </style>
  34. </head>
  35. <body>
  36. <div class="box">
  37. <div class="box2"></div>
  38. <div class="box3"></div>
  39. <!-- <span>hello</span> -->
  40. <!-- <p>hello</p> -->
  41. </div>
  42. </body>
  43. </html>