企业官网建设流程全解析

1. 浮动原理

float: left/right/none

浮动元素脱离标准文档流，向左/向右停靠，实现横向并排布局。

浮动副作用：父级高度塌陷、后续元素上浮、布局错乱。

2. 五种清除浮动方案

方案1：额外空 div（最简单、不推荐）

浮动末尾加空标签，设置clear: both；缺点：冗余无意义标签。

方案2：伪类清除浮动（项目常用）

.clearfix::after{ content: ""; display: block; clear: both; height: 0; visibility: hidden; } .clearfix{ *zoom: 1; /* 兼容IE */ }

方案3：父级 overflow:hidden

父元素设置 overflow:hidden；简单快捷，缺点：溢出内容会被裁剪。

方案4：父级开启 BFC

通过触发 BFC 自动计算浮动高度，从根源解决塌陷。

方案5：flex 替代浮动（现代首选）

现代布局彻底抛弃浮动，全部使用 Flex/Grid，无塌陷问题。