css 浮动

/* 示例代码：使用浮动属性进行布局 */

/* 定义一个容器 */
.container {
  border: 1px solid black;
  padding: 10px;
  overflow: auto; /* 清除浮动，确保容器包含浮动元素 */
}

/* 左浮动的盒子 */
.box-left {
  float: left;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin-right: 10px;
}

/* 右浮动的盒子 */
.box-right {
  float: right;
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  margin-left: 10px;
}

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

解释说明：

• .container 是一个包含浮动元素的容器。为了确保容器能够正确包裹浮动元素，我们使用了 overflow: auto 来清除浮动。
• .box-left 和 .box-right 分别是左浮动和右浮动的盒子，它们会根据浮动方向排列在容器的左侧和右侧。
• .clearfix 是一种常见的清除浮动的方法，通过伪元素 ::after 插入一个清除浮动的元素，确保浮动不会影响后续内容的布局。