11.浮动.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  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. #box1 {
  9. width: 200px;
  10. height: 200px;
  11. /* float: left; */
  12. /* display: inline-block; */
  13. background: #f00;
  14. }
  15. #box2 {
  16. width: 200px;
  17. height: 200px;
  18. float: left;
  19. /* display: inline-block; */
  20. background: #ff0;
  21. }
  22. #box3 {
  23. width: 200px;
  24. height: 200px;
  25. float: left;
  26. /* display: inline-block; */
  27. background: #f0f;
  28. }
  29. #box4 {
  30. width: 200px;
  31. height: 200px;
  32. background: #0f0;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <!--
  38. 浮动:使元素在一行排列
  39. float 浮动
  40. left 左浮
  41. right 右浮
  42. 脱离文档流
  43. -->
  44. <div id="box1">1</div>
  45. <div id="box2">2</div>
  46. <div id="box3">3</div>
  47. <div id="box4">4</div>
  48. </body>
  49. </html>