现代网页布局需语义化html标签（header、nav等）与flex/grid分层配合，禁用float和table；flex容器必须设在共同父级，子项用gap而非margin控距，nav横排需flex+justify-content，移动端须配合媒体查询与状态切换。
直接用 <header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 这些标签搭结构，再配 display: flex 控制排列方向和对齐方式，就能做出语义清晰、响应及时、不靠浮动也不靠 hack 的现代布局——前提是别把语义当样式使，也别指望浏览器自动给你排好。
为什么不能直接给 <nav></nav> 写 display: flex 就完事？
因为语义标签本身不带布局逻辑，只带极简默认 margin/padding，而且不同浏览器可能有微小差异。更关键的是：它们默认是 block 元素，但不会自动横向排列子项，也不会处理换行、对齐或间距。
- 单独设
nav { display: flex; }只会让内部<a></a>横向铺开，但若没加gap或justify-content，菜单项会挤在一起或贴左对齐 - 如果
<nav></nav>里混了<div> 或未包裹的文本，Flex 容器会把它们当匿名 flex item 处理，容易出意料之外的换行或尺寸 <li>移动端需要折叠时，仅靠 <code>display: flex不够，得配合@media切换为flex-direction: column或隐藏+按钮触发
<main></main> 和 <aside></aside> 并排时，Flex 容器该套在哪一层？
必须套在它们的**共同父容器**上，而不是分别给 <main></main> 和 <aside></aside> 设 display: flex——后者会让每个元素自己变成独立 flex 容器，完全无法并排。
正确做法是：
section.layout {
display: flex;
gap: 2rem;
}
main { flex: 1; }
aside { width: 300px; }
- 别用
float或position: absolute强行拉位置，那会破坏文档流和可访问性 -
flex: 1比写死width: 70%更健壮，能自动填满剩余空间，且响应式断点里只需改flex-direction就能竖排 - 如果
<aside></aside>内容与邻近<article></article>无逻辑关联（比如放全站广告），它就不该用<aside></aside>，而该用<div role="complementary"> 或普通 <code><div> <h3>Flex 布局下，<code><header></header>里的 logo + nav 怎么水平分置又居中对齐？核心是让
<header></header>成为 flex 容器，并控制主轴（justify-content）和交叉轴（align-items）两个方向。header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; }-
justify-content: space-between把 logo 和 nav 推到两端；若想都居中但彼此分离，改用justify-content: space-around -
align-items: center确保文字、图片、导航链接垂直居中——没这句，<nav></nav>可能因行高或内边距错位 - 避免在
<header></header>上设固定高度，否则会截断内容；用 padding + min-height 更安全 - 如果 nav 内部链接要等宽分布，别在
<nav></nav>上用justify-content: space-evenly，而应在nav ul上设display: flex; width: 100%，再让每个liflex: 1
最容易被忽略的一点：Flex 容器一旦启用，其子元素的
margin在主轴方向（如 row 时的左右 margin）可能失效或被压缩，尤其当用了justify-content: space-between时——此时该用gap控制间距，而不是依赖子元素自身的 margin。 -
