CSS设置float:left后第二个div尺寸发生变化原因咨询

这是CSS浮动的固有特性导致的，具体逻辑如下：

• 给#first添加float: left后，这个元素会脱离常规文档流，不再占用常规流的布局空间，常规流里的块级元素计算布局位置时会默认忽略它的存在。
• 代码里的<p>是常规流块级元素，它的盒子实际是从页面最左侧开始排布，宽度默认占满父容器，但<p>内部的文本属于行内内容，行内内容可以识别浮动元素的边界，会自动环绕在浮动的红盒右侧，因此<p>的整体高度被文本撑高，高度超过了红盒的100px。
• 第二个蓝色的#second盒子虽然本身设置了width: 100px、height: 100px的固定尺寸，但它既没有设置clear属性清除浮动，也没有触发BFC（块级格式化上下文），它的盒子会和左侧的浮动红盒产生区域重叠，你视觉上看到的蓝色盒子尺寸变化，本质是重叠区域被红盒遮挡导致的，同时#second内部的文本会自动避开浮动元素，也会强化「尺寸变化」的视觉错觉。

如果要避免这个问题，可以给#second添加clear: left清除左浮动的影响，或者添加overflow: hidden触发BFC让它的盒子避开浮动元素。

内容的提问来源于stack exchange，提问作者Sinan