CSS Float 元素与包含块高度塌陷：一场深入的解析 大家好！今天我们要探讨的是 CSS 中一个非常经典，但又容易让人困惑的问题：float 元素对包含块高度的影响，以及由此引发的“高度塌陷”现象。理解这个问题对于掌握 CSS 布局至关重要。 1. 什么是 Float？ 首先，我们要明确 float 属性的作用。float 属性用于指定一个元素应该沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。 简单来说，float 元素会脱离正常的文档流，并尽可能地向其包含块的左侧或右侧移动。 代码示例： <!DOCTYPE html> <html> <head> <style> .container { width: 300px; border: 1px solid black; } .floated { width: 100px; height: 100px; background-color: lightblue; float: left; } .content { padding: 10px; } </style> < …