清楚浮动的方式

浮动是指在网页布局中，将一个元素从文档的正常流中移出，并放置在容器的左侧或右侧。浮动元素可以让其它元素围绕着它来排布。

在CSS中，使用`float`属性来设置元素的浮动方式。常见的取值有`left`、`right`和`none`。例如，将一个元素向左浮动可以使用如下代码：

div {
  float: left;
}

当一个元素浮动后，其它元素会根据文档流中的位置来排布。如果当前元素是第一个浮动的元素，那么下一个元素会出现在它的下方。如果下一个元素也浮动了，那么它会排在上一个元素的下方，以此类推。

需要注意的是，浮动元素会脱离文档流，因此可能会对布局产生一些影响，例如父元素无法自适应高度。为了避免这种情况，可以使用清除浮动的方法，例如在父元素的末尾添加一个空元素，并设置其`clear`属性为`both`：

<div class="parent">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
  <div class="clearfix"></div>
</div>

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clearfix {
  clear: both;
}