css浮动制作
浮动的基本概念
CSS浮动（float）是一种布局技术，允许元素脱离文档流并向左或向右浮动，其他内容会围绕它排列。常用于实现图文混排或多列布局。
浮动的属性值
浮动属性有三个主要值：
float: left;元素向左浮动float: right;元素向右浮动float: none;默认值，不浮动
.float-left {
float: left;
width: 200px;
margin-right: 20px;
}清除浮动的方法
浮动元素会导致父元素高度塌陷，常用清除方法：
方法1：使用clear属性
.clearfix {
clear: both;
}方法2：伪元素清除法（推荐）
.clearfix::after {
content: "";
display: table;
clear: both;
}方法3：overflow方法
.container {
overflow: hidden; /* 或auto */
}浮动布局实例
两栏布局示例：
<div class="container">
<div class="sidebar">左侧边栏</div>
<div class="main-content">主要内容</div>
</div>.sidebar {
float: left;
width: 25%;
}
.main-content {
float: right;
width: 75%;
}
.container::after {
content: "";
display: table;
clear: both;
}浮动与inline-block对比
浮动布局与display: inline-block的区别：
- 浮动会脱离文档流，inline-block不会
- 浮动元素默认顶部对齐，inline-block基线对齐
- 浮动需要清除，inline-block不需要
现代替代方案
虽然浮动仍有使用场景，但现代布局更推荐：
- Flexbox（弹性盒子）
- CSS Grid（网格布局）
- 定位布局（position）
这些新方法在复杂布局中更灵活且易于维护。
