高度塌陷因浮动元素脱离文档流导致父容器无法计算其高度，使用clearfix通过伪元素插入清除浮动内容使父元素包含子元素，如.clearfix::after{content:"";display:block;clear:both;}并应用于父容器，兼容版增加*zoom:1支持老IE，现代方案可用overflow:hidden或Flex/Grid布局替代。

使用float和盒模型可实现兼容旧浏览器的多列布局，通过设置box-sizing:border-box、控制列宽与浮动方向，并清除浮动避免高度塌陷，适用于两列或三列等宽布局，需注意总宽度计算及响应式调整。

浮动可用于实现横向导航菜单，通过给li元素设置float:left使其并排显示，需清除浮动避免布局塌陷，常配合overflow:hidden处理，适用于旧项目维护或简单布局。

使用伪类clearfix或overflow属性可解决浮动导致的父容器背景显示异常，推荐通过正确清除浮动使父容器包含子元素，或将背景色设于外层容器；更优方案是采用Flex或Grid布局，避免浮动带来的高度塌陷问题，提升背景样式控制的稳定性和布局语义化。

清除浮动可解决父元素高度塌陷问题，常用方法有：添加空元素并设置clear:both；父容器设overflow:hidden触发BFC；推荐使用伪元素after结合clear:both，兼容且不污染结构。

清除浮动影响的方法包括：使用clear属性、伪元素清除法（推荐）、overflow触发BFC，以及采用Flexbox或Grid现代布局。最常用的是为父容器添加clearfix类，通过::after伪元素实现清除；新项目建议使用Flex或Grid布局以避免浮动问题。

Bootstrap通过container、row、col类结合Flexbox实现响应式网格布局，利用12列系统和断点前缀（如col-md-6）适配不同屏幕尺寸，配合对齐、间距、嵌套及组件等工具构建高效弹性布局。

使用clearfix或display:flow-root可解决浮动导致的高度塌陷。clearfix通过伪元素清除浮动，兼容性好；display:flow-root触发BFC，现代浏览器推荐。

浮动元素重叠因脱离文档流导致布局错乱，常见于未清除浮动的父容器或相邻元素；2.解决方法包括使用clear属性、触发BFC（如overflow:hidden）、clearfix技巧（伪类after清除）；3.推荐采用Flex或Grid现代布局，无需处理浮动问题，结构更简洁，响应式更优。

使用float实现图文环绕，图片左浮动并设置外边距，文字自动环绕；2.采用Flex布局通过flex-container定义弹性容器，控制图文并排或堆叠，对齐和间距更灵活；3.运用Grid布局定义网格结构，适合复杂图文组合，可精确控制行列跨度；4.注意设置图片最大宽度、自适应高度及响应式调整，优先推荐Flex和Grid布局以提升维护性与兼容性。

Flexbox通过display:flex实现容器内项目的高效对齐与分布，相比传统布局更直观、响应式更强，适用于卡片、导航栏等常见场景。

清除浮动的核心是恢复文档流秩序，常用方法包括伪元素clearfix、触发BFC（如overflow或display:flow-root）、父元素设高或浮动，以及现代布局Flexbox/Grid。其中，伪元素法兼容性好且无副作用，是最推荐的传统方案；display:flow-root语义明确但兼容性较新；而Flexbox和Grid从布局层面规避了浮动问题，是现代项目的首选方案。

弹性盒子布局的核心是通过display:flex;将容器转换为弹性布局，其子元素成为弹性项目并沿主轴和交叉轴排列；flex-direction决定主轴方向，justify-content控制主轴对齐，align-items控制交叉轴对齐，配合flex-wrap、gap、margin等属性可实现灵活的响应式布局。

当使用float进行CSS布局时，浮动元素会脱离文档流，导致其父容器无法正确感知高度，从而发生父容器塌陷。为避免这一问题，有几种常用的清除浮动技巧。1.使用clear属性清除浮动在浮动元素的末尾添加一个空元素，并设置clear:both来闭合浮动：HTML示例：左浮动右浮动CSS样式：.clearfix{clear:both;}这种方法简单直接，但需要额外的DOM元素，不够语义化。2.使用伪元素清除浮动（推荐）通过::after伪元素在容器末尾插入

当HTML中的图片在容器内无法按预期缩放时，通常是由于未正确设置CSS宽度属性。本教程将深入探讨图片默认行为，并提供通过CSSwidth:100%;或max-width:100%;使图片响应式适应其父容器的解决方案，确保布局美观且避免内容溢出，同时介绍一些高级优化技巧。

掌握CSS嵌套布局需统一使用box-sizing:border-box避免尺寸溢出，处理margin折叠通过BFC或padding替代，合理利用BFC隔离盒模型影响。