float浮动基础与清除浮动的三种方式

在 HTML 中，可以使用 CSS 的 float 属性来实现浮动布局。float 可以将一个元素向左或向右浮动，让其他元素环绕在它周围。

使用 float 布局可以实现以下效果：

1. 实现多栏布局

2. 让某个元素环绕在另一个元素周围

3. 实现图片的环绕效果

<style>
  .left-column {
    float: left;
    width: 200px;
    background-color: #f5f5f5;
  }
  
  .right-column {
    float: right;
    width: 200px;
    background-color: #f5f5f5;
  }
  
  .main-content {
    margin-left: 220px;
    margin-right: 220px;
    background-color: #fff;
  }
  
  img {
    float: left;
    margin-right: 20px;
  }
</style>

<div class="left-column">
  <p>左侧栏</p>
</div>

<div class="right-column">
  <p>右侧栏</p>
</div>

<div class="main-content">
  <h1>这是标题</h1>
  <p>这是正文内容</p>
  <img src="image.jpg" alt="图片">
  <p>这是一张图片</p>
  <p>这是正文内容</p>
</div>

.left-column 和 .right-column 分别代表网页的左侧栏和右侧栏，它们都采用了 float 属性，并设置了宽度。.main-content 代表主要内容区域，使用 margin-left 和 margin-right 来为其留出空间，让左右栏实现环绕效果。图片使用 float 属性让文字环绕在它的周围。

需要注意的是，浮动元素的高度不会对其他元素产生影响，如果浮动元素高度超过了其父元素的高度，父元素的高度将会塌陷，可能会影响布局。此时可以使用 clear 属性来清除浮动。

清除浮动的三种方式

在浮动元素下方添加一个空标签并设置 clear 属性为 both。

<div style="clear:both;"></div>

在父级元素中添加一个带有 clear 属性的伪元素（::after）。

.parent::after {
  content:"";
  display:block;
  clear:both;
}

在父级元素中添加 overflow 属性为 auto 或 hidden。

.parent {
  overflow:hidden; /* 或者 overflow:auto; */
}

这三种方式都可以清除浮动，但使用 overflow 属性清除浮动可能会对布局造成影响，尤其是在使用绝对定位时，可能会导致元素被隐藏或溢出。因此，建议使用前两种方式来清除浮动。