-
使用伪类:after清除浮动可解决父容器高度塌陷问题。通过为.clearfix:after设置content:""、display:block和clear:both等样式，生成虚拟节点闭合浮动，无需添加额外HTML标签，配合*zoom:1兼容IE，适用于多栏布局、文字环绕等场景。
-
要运行HTML代码需确保其被正确解析，最直接方法是将代码保存为.html文件后用浏览器打开；也可通过JavaScript操作DOM动态插入HTML内容；还可利用PHP、Python等服务器端语言输出HTML响应，由浏览器解析；此外，使用JSFiddle、CodePen等在线平台可实现实时预览与调试，便于快速测试和开发。
-
浏览器无法真正导出可运行的HTML5文件，只能保存静态HTML快照；要离线运行需用开发者工具复制完整DOM、手动处理资源路径，并通过本地服务器（如http-server）而非双击打开。
-
浮动导致父容器高度塌陷，border-radius看似失效实为渲染区域缺失；清除浮动推荐::after伪元素（content:"";display:table;clear:both）；现代布局应优先使用Flex/Grid替代浮动。
-
可选链操作符（?.）解决深层嵌套属性访问时因null/undefined导致的运行时错误问题，通过自动短路返回undefined，避免层层判空；支持属性访问、方法调用、数组索引，并常与??配合提供精准默认值。
-
X-UA-Compatible已完全失效，仅对IE8–IE11有效，现代浏览器及Edge均忽略；IE11停更后该标签被弃用，正确设置需放<head>最前或通过HTTP头发送，真正兼容难点在于CSS、JS等底层特性支持。
-
在HTML中添加TwitterCards需在head中设置meta标签，包括card类型、site账号、title、description和image等信息，并通过TwitterCardValidator验证效果。
-
vertical-align用于控制inline或inline-block元素的垂直对齐，常见取值有baseline、top、middle等，适用于图片与文本对齐、表单布局等场景，需注意其仅对行内元素有效且受line-height影响。
-
BEM能防CSS类名冲突，因其通过块-元素-修饰符三段式命名（如.header__title--large）实现天然隔离；需配合ESLint、Stylelint等工具强制约束，禁用后代选择器与ID/标签选择器，并匹配严格正则；与CSS-in-JS、ShadowDOM不冲突，可共存互补；超小项目或动态样式场景则不宜硬套。
-
flex-grow:1在flex-wrap:wrap下无法实现跨行等高，仅在同一行内按比例拉伸；真正起效的是align-items:stretch，但需父容器有交叉轴尺寸参照且卡片内部不破坏高度继承链。
-
表单自动填充应按语义开启，密码类等特殊字段必须关闭；autocomplete="off"常失效，应改用语义化值如new-password、tel、cc-number等，并确保前后端语义一致。
