css的浮动和清除浮动怎么写

CSS的浮动（Float）是一种布局技术，用于让元素脱离正常文档流，允许它左侧或右侧对齐。通过设置`float`属性，可以使元素像在页面上漂浮一样移动到一边，腾出空间给其后的元素。

element {
  float: left; /* 左浮动 */
  float: right; /* 右浮动 */
}

如果你想清除浮动，有几种方法：

1. **无序列表法**：如果浮动元素是列表项，可以将一个空列表放在浮动元素之后，然后清除它的浮动影响。

<ul>
  <li style="float: left;"></li>
  <!-- 内容 -->
</ul>

2. **父级clearfix**：通过添加一个特殊的CSS类，如`.clearfix`，可以让父元素包含浮动子元素并修复布局。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.parent-with-clearfix {
  position: relative;
  zoom: 1; /* For IE */
  .clearfix(); /* 使用clearfix类 */
}

3. **Flexbox或Grid**：现代浏览器支持更高级的布局模型，如Flexbox和Grid，可以避免浮动带来的复杂性和潜在问题。

4. **伪元素`: 如果是在块级元素内部清除浮动，可以用`:before`或`:after`伪元素插入一个非浮动的内联元素，达到清除效果。

.container::before {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

以上就是浮动的基本概念和清除浮动的方法。