1. 左浮动的应用要点
1.1 何时使用左浮动
在网页布局中，左浮动通常用于让元素向左对齐并让其他内容环绕其右侧。文本环绕效果是左浮动的典型场景。使用时需要关注父容器高度和清除浮动的问题。
在实现多列布局时，左浮动可以作为列之间的基础排列方式。要点包括：浮动上下游文档流的影响、溢出控制与兼容性处理。通过合理的宽度设置和边距，可以实现稳定的视觉效果。
/* 左浮动示例 */
.demo-left { float: left; width: 40%; margin-right: 20px; }
.demo-right { float: right; width: 60%; }1.2 如何处理清除与容器高度
浮动元素不再占据文档流的普通参与者，因此需要通过清除浮动或对父容器应用包含浮动的技巧来确保布局稳定。
常见做法包括清除浮动的 CSS 方案：clearfix、overflow: hidden、以及伪元素清除。这些方法的差异在于浏览器兼容性和对高度的影响。
/* clearfix 常用写法 */
.clearfix:after { content: ""; display: table; clear: both; }
.wrapper { overflow: hidden; } /* 简便的清除方式，但可能隐藏溢出内容 */2. 右浮动的要点
2.1 文本环绕与图像对齐
右浮动通常将元素对齐到右侧，文本会从左向右环绕，这在图片放文稿、卡片标题等场景很常见。要点在于确保环绕区域的宽度可预测，并避免内容被意外遮挡。
设计中右浮动的元素应具备明确的宽度、边距与边框，以避免与其他内容挤压发生冲突。对比不同布局时，右浮动能提供直观的视觉分层。
/* 右浮动示例 */
.demo-right { float: right; width: 35%; margin-left: 20px; }2.2 响应式布局中的浮动替代策略
在响应式设计中，浮动可能引发跨设备的排版问题，因此需要考虑替代方案，如<Flexbox或<Grid来实现列对齐与自适应宽度。
如果必须维持浮动，务必结合媒体查询，以在不同断点下切换到合适的浮动策略，确保内容的可读性与可访问性。
@media (max-width: 800px) {
.demo-left, .demo-right { float: none; width: 100%; }
}