最可靠主布局方式是 display: flex 和 display: grid；flex 适合一维线性结构（如 header+main+sidebar+footer），需父容器设 display: flex 才生效；grid 适合二维精确定位场景（如仪表盘），IE11 不支持需降级；table 和 float 因语义错误、可访问性差及脱离文档流等问题不推荐用于主结构。
display: flex
和
display: grid
是当前最可靠、最主流的两种布局方式，其余如
float
、
position: absolute
、
table
均不推荐用于页面主结构。
用
display: flex
做一维主结构布局
适合 header + main + sidebar + footer 这类线性排列场景，控制逻辑清晰，响应式适配成本低。
父容器必须设
display: flex
，否则子元素上写
flex: 1
或
justify-content
全无效
flex-direction: column
在移动端首屏堆叠时比
row
更自然
侧边栏固定宽 + 主内容自适应？写成
sidebar { flex: 0 0 240px; }
+
main { flex: 1; }
含长文本或 URL 的子元素容易撑破容器，加
min-width: 0
才能触发
overflow: hidden
用
display: grid
做二维区域划分
适合仪表盘、杂志式多模块、带固定头部/侧边+滚动内容区等需要行列精确定位的场景。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
别一上来就用
grid-template-areas
，命名区域维护成本高，改一个名字全得同步；优先用
grid-template-columns: 240px 1fr 320px
这类线性定义
gap
（或
grid-gap
）比手动给子元素加
margin
更安全，避免 margin 合并问题
子元素默认不继承父级
text-align
，居中需单独设
justify-self: center
或
place-self: center
IE11 完全不支持
grid
（前缀也无效），若需兼容，得 fallback 到
flex
或
float
为什么不能用
或
float
做主布局
的语义是呈现表格化数据，不是排版工具；
float
本质是让元素脱离文档流，必须配合
clear
防止塌陷，且无法解决垂直居中、等高、响应式重排等现代需求。
用
布局时，屏幕阅读器会按表格逻辑读取，破坏可访问性结构
float
在 Flex/Grid 普及后已退为“局部微调手段”，比如文字环绕图片，而非整页结构
所有现代 CSS 布局都依赖父容器开启对应上下文（
flex
/
grid
），而
float
是对单个元素施加副作用，不可控性高
真正难的不是选哪种方式，而是理解「布局能力由父容器决定」——子元素再怎么写
flex
或
grid-column
，只要父容器没开对应 display 模式，就等于没写。
