float布局需左栏float:left+显式宽度，右栏用margin-left留空或overflow:hidden触发bfc避让；父容器必须清除浮动防塌陷，html结构须左栏在前，否则失效。

float:left + margin-left 是最直白但易翻车的写法

只给左栏加 float: left 和 width，右栏不处理——它不会自动“让位”，而是从顶部开始渲染，大概率叠在左栏上或掉到下一行。必须手动给右栏留出空间。

• margin-left 值必须严格等于左栏宽度，比如左栏 width: 200px，右栏就得写 margin-left: 200px
• 右栏不能设 width: 100%，否则会撑破容器；应保持 width: auto（默认行为）
• 父容器不用清除浮动也能显示，但高度会塌陷——后续元素可能上移，尤其当页面有 footer 时容易错位

float:left + overflow:hidden 更健壮，但得防裁剪

右栏用 overflow: hidden 不是为了隐藏内容，而是触发 BFC（块级格式化上下文），让它自动避开浮动区域。比 margin-left 更省心，尤其左右栏高度不一致时不会错位。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 左栏仍需 float: left + 显式 width
• 右栏只需 overflow: hidden（或 overflow: auto），无需计算像素值
• 隐患：如果右栏里有 position: absolute 子元素超出边界，会被裁掉；IE6/7 下 overflow: hidden 触发 hasLayout 不稳定，得补 zoom: 1

父容器必须清除浮动，否则布局会“漏底”

浮动元素脱离文档流，父容器感知不到高度，表现为边框消失、背景色不显示、后续内容顶上来——这不是样式没生效，是容器真“塌”了。

• 推荐伪元素清除法：.container::after { content: ""; display: table; clear: both; }
• 简单粗暴法：.container { overflow: hidden; }，但要注意可能截断 box-shadow 或 transform 溢出部分
• IE8 及以下必须加 zoom: 1，否则 overflow: hidden 在某些场景下不生效

HTML结构顺序不能颠倒，否则浮动直接失效

浮动依赖渲染顺序。如果把右栏写在左栏前面，浏览器先渲染右栏（占满整行），再渲染左栏浮动——它没地方可浮，只能被挤到下一行。

• 正确顺序：<div class="sidebar"></div> <div class="main"></div>
• 错误顺序：<div class="main"></div> <div class="sidebar"></div>
• 想主内容语义优先？别硬套浮动，换 display: flex 或 display: grid ——浮动天生不支持 DOM 顺序和视觉顺序分离

浮动布局现在不是“不能用”，而是“改起来太疼”。只要老系统还在跑，就得知道它怎么咬合——关键不是背代码，是理解 float 本质是文本环绕机制，所有布局效果都是借了这个副作用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！