使用 float 属性将元素左浮动或右浮动

使用 float 属性将元素左浮动或右浮动
0
<head>
  <style>
  #left {
    float: left;
    width: 50%;
  }
  #right {
    float: right;
    width: 40%;
  }
  aside, section {
    padding: 2px;
    background-color: #ccc;
  }
  </style>
</head>
<body>
  <header>
    <h1>欢迎!</h1>
  </header>
  <section id="left">
    <h2>内容</h2>
    <p>好样的</p>
  </section>
  <aside id="right">
    <h2>侧边栏</h2>
    <p>一些链接</p>
  </aside>
</body>

这道题目我虽然写对了(因为题目要求真的很简单),但是我觉得并不理解 float 元素的用法,就是会用在什么场景呢?

接下来要介绍的定位机制并不是 position 属性的选项,它通过元素的 float 属性来设置。浮动元素不在文档流中,它向左或向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用 width 属性来指定浮动元素占据的水平空间。

https://learn.freecodecamp.one/responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property/