基本语法：
.element {
float: left | right | none;
}
- left：元素浮动到容器的左侧。
- right：元素浮动到容器的右侧。
- none：默认值，元素不浮动。
浮动的特性和影响：
1. 脱离文档流： 浮动的元素脱离了正常的文档流，不再占据文档布局的位置，但会影响周围的元素。
2. 元素堆叠： 浮动的元素会向左或向右浮动，直到遇到容器的边缘或另一个浮动元素。如果容器宽度不够，浮动元素将换行显示。
3. 高度塌陷问题： 浮动元素脱离文档流可能导致包含它的容器高度塌陷，容器无法自动适应浮动元素的高度。解决这个问题通常需要清除浮动。
清除浮动（Clearfix）：
为了防止浮动元素引起的高度塌陷问题，通常会在包含浮动元素的容器上应用清除浮动的技术。其中一种常见的方法是使用 clearfix。
.clearfix::after {
content: "";
display: table;
clear: both;
}
然后在包含浮动元素的容器上添加 clearfix 类：
<div class="clearfix">
<!-- 包含浮动元素的容器 -->
<div class="float-left">Float Left</div>
<div class="float-right">Float Right</div>
</div>
这样可以确保容器正确地包含浮动元素，避免了高度塌陷问题。需要注意的是，近年来 Flexbox 和 Grid 布局等新的布局方式已经在一定程度上替代了浮动在页面布局中的应用。
转载请注明出处：http://www.zyzy.cn/article/detail/4009/CSS