浮动布局

Flex和Grid布局中浮动失效，应使用各自提供的对齐属性；仅在非Flex/Grid容器中浮动有效，适用于图文环绕等场景；混合使用时需注意结构划分与清除浮动，推荐优先采用现代布局方案以确保可维护性。 在现代网页布局中，Flex 和 Grid 已经成为主流的布局方式，而传统浮动（float）布局虽然逐…

父容器无法撑高因浮动脱离文档流，可通过四种方案解决：1. 添加clear: both的空元素；2. 伪元素::after结合clearfix类，推荐且不污染结构；3. 设置overflow: hidden/auto触发BFC，但可能裁剪溢出内容；4. 使用display: flow-root创建BF…

使用浮动布局可实现兼容性良好的图片画廊，通过float: left设置四列布局（25%宽度），配合padding控制间距，overflow: hidden清除浮动防止高度塌陷，并利用媒体查询在768px和480px断点分别调整为两列（50%）和单列（100%）以实现响应式适配。 浮动布局（Float…