基础 CSS 浮动左右类

在网页布局中，浮动（float）是非常常用的一种布局方式。它可以让块级元素向左或向右浮动，在一定程度上改变元素的位置。

以下是基础 CSS 浮动左右类的介绍及样例。

float

float 属性是控制元素浮动的关键。它有三个值：左浮动（left）、右浮动（right）和清除浮动（none）。

.clearfix::after { /* 清除浮动 */
  content: "";
  display: table;
  clear: both;
}

.float-left {
  float: left; /* 左浮动 */
}

.float-right {
  float: right; /* 右浮动 */
}

使用场景

浮动可以创建多列布局，实现元素的自适应效果，常用于文章排版、图片布局等场景，以下是浮动的实例演示。

文章排版

<div class="clearfix">
  <div class="float-left">左侧文章内容</div>
  <div class="float-right">右侧文章内容</div>
</div>

图片布局

<div class="clearfix">
  <img class="float-left" src="img.jpg" alt="图片 1">
  <img class="float-right" src="img.jpg" alt="图片 2">
</div>

注意事项

• 浮动元素会脱离文档流，对后续元素造成影响，需要使用清除浮动的方法来避免影响。
• 浮动元素设置宽度时，应当使用百分比或 em 等相对单位，避免受到不同屏幕尺寸的影响。
• 调整浮动元素的顺序，可以使用 flex 布局、grid 布局等方式来达到不同的效果。

以上即为基础 CSS 浮动左右类的介绍及样例。在使用过程中，请注意合理设置浮动元素的宽度、高度、间距，以获得更好的布局效果。