13_解决浮动问题.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  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. .box::after{
  34. /* 伪元素插入的元素 为行级元素 */
  35. content: "";
  36. display: block;
  37. clear: both;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <div class="box">
  43. <div class="box2"></div>
  44. <div class="box3"></div>
  45. <!-- <span>hello</span> -->
  46. <!-- <p>hello</p> -->
  47. </div>
  48. </body>
  49. </html>