CSS 盒模型与 BFC
盒模型有两种：标准盒模型 box-sizing: content-box 下 width 只含内容区，加 padding/border 会撑大元素；IE 盒模型 border-box 下 width 包含 padding 与 border，设置多少就是多少。工程实践几乎全部用 *{box-sizing:border-box}，因为它的尺寸语义符合直觉，调布局的成本最低。
BFC（块级格式化上下文）是一个独立的渲染区域，内部元素不受外部影响。触发条件：float 不为 none、position 为 absolute/fixed、overflow 不为 visible、display 为 flex/grid/inline-block 等。它解决三个经典问题：父元素高度塌陷（子元素浮动时）、相邻块级元素外边距折叠、文字环绕浮动元素。
- box-sizing: border-box 是工程默认；width 即可见宽，算尺寸不烧脑
- BFC 是隔离的渲染区域：内部浮动参与高度计算、margin 不与外部折叠
- 清浮动 / 防 margin 折叠 / 自适应两栏布局，本质都是“再造一个 BFC”
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } /* 全局 border-box，尺寸符合直觉 */ .outer { overflow: hidden; /* 触发 BFC：父盒子重新“包住”浮动子元素 */ border: 2px solid #f0c33c; } .float { float: left; width: 100px; height: 60px; background: #ffe; } /* margin 折叠演示：相邻块级元素的上下 margin 会合并 */ .a { margin-bottom: 30px; background: #eef; } .b { margin-top: 20px; background: #fee; } .bfc { overflow: hidden; } /* 包一层 BFC，margin 不再与外界合并 */ </style> </head> <body> <div class="outer"><div class="float">浮动</div></div> <p>父元素没有被浮动子元素撑塌 —— BFC 生效。</p> <div class="a">A（margin-bottom 30px）</div> <div class="bfc"><div class="b">B（包在 BFC 里，margin 不折叠）</div></div> </body> </html>
本节要点盒模型背 border-box；BFC 记住触发条件与三大用途：清浮动、防 margin 折叠、隔离布局。
