display 决定元素参与哪种布局算法，不是「能不能看见」

block / inline / inline-block

display:block 独占一行，width/height/margin 全生效

行内元素混排：inline：不设 width/height左右 margin/padding 有效上下 margin 被忽略

inline-block：能设宽高仍在一行内流动之间会有空白字符造成的缝
常见标签宽高垂直 margin是否独占行
blockdiv p section h1 ul li生效生效（且会塌陷）是
inlinea span b em code img input无效无效否
inline-block按钮、徽章、图标生效生效（不塌陷）否

inline-block 之间那道缝来自 HTML 源码里的换行符被当空白渲染。三种解法：父元素 font-size: 0（副作用大）、写成一排不留换行、或直接用 Flex（推荐）。

none / visibility / opacity：三种「看不见」的代价完全不同

我是 display:none 我是 visibility:hidden 我是 opacity:0
写法占位可交互能被屏幕阅读器读到能过渡动画
display: none不占否否（从可访问性树移除）否（直接消失）
visibility: hidden占位否否可过渡（离散切换）
opacity: 0占位是（仍可点，注意误触）是是（首选动画属性）
/* 现代做法：显示/隐藏交给一个类，过渡用 opacity + visibility 组合 */
.popover { opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s; }
.popover.is-open { opacity: 1; visibility: visible; }
/* 纯给屏幕阅读器隐藏（视觉保留）： */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

float：它本来的用途是文字环绕

浮动的图片脱离正常流，后面的文字自动绕着它排 —— 这是报纸版面的需求，也是 float 被设计出来的唯一原因。图片宽度加右外边距决定了文字绕排的位置。

浮动造成的「父容器塌陷」与四种清除方式

左浮动 48%
右浮动 48%
/* ① 传统 clearfix：伪元素占一行把浮动「顶」住 */
.clearfix::after { content: ""; display: block; clear: both; }
/* ② 父级 overflow: hidden —— 顺带创建 BFC，简单但会裁掉溢出内容 */
/* ③ display: flow-root —— 只为创建 BFC 而生，语义最准确，无副作用 */
.parent { display: flow-root; }
/* ④ 两个都浮动时给最后一个加 clear: both（旧写法，不推荐） */
用 clearfix 的父容器：高度正确包住浮动
右浮动
紧随其后的正常流元素不再被浮动压在下面

今天还用 float 吗？

场景选择
图文环绕、首字下沉旁的图片float 仍是正解，Flex/Grid 做不到绕排
两列/三列布局、等高卡片、导航条Flex（第十章）或 Grid（第十一章），别再写 float + 负 margin
邮件 HTML少数仍要用 float/table 的领域（客户端 CSS 支持极差）

BFC 顺手解决边距塌陷

父容器 overflow: hidden 形成 BFC 后，子的 margin-top: 24px 不再穿透，容器顶部真的留出 24px

创建 BFC 的常见触发条件：float、position: absolute/fixed、display: flow-root/inline-block/table-cell/flex/grid、overflow 非 visible、contain: paint。

其余 display 值速查

display: tabletable-cell 让「不定高内容垂直居中最省事」
inline-grid行内网格grid块级网格
display: contents      /* 盒子自身「消失」，子元素直接参与父布局（注意：会丢掉自身的背景/边框，且曾引发展示与可访问性问题，谨慎全局使用） */
display: inline-table  /* 行内表格 */