验证文档流显示顺序

代码练习核心内容
本代码用于练习左浮动横向多栏布局、overflow:hidden清除浮动高度塌陷、父容器水平居中，同时演示多类 CSS 批量选择器写法。
详细拆解

1. 核心知识点 1：浮动与高度塌陷
   4 个子盒子全部float:left，横向并排；
   浮动元素脱离文档流，父容器默认高度变为 0（高度塌陷）；
   overflow: hidden 是本案例重点，用于触发 BFC，解决塌陷，让黄色父盒子正常显示背景。
2. 核心知识点 2：父盒子居中
   .parent设置width:1000px; margin:0 auto，实现容器在页面水平居中。
3. 核心知识点 3：批量选择器拓展（注释备用代码）
   代码注释了两种批量统一样式的写法，用于对比学习：
   属性选择器 div[class^="son"]：匹配 class 以 son 开头的 div；
   多类并集选择器 .son1,.son2,.son3,.son4：多个类共用一套样式。
4. 页面效果
   黄色 1000px 宽居中容器内，一行排列 4 个 250×200px 不同彩色方块。