为何蓝色盒子背景未显示？兼问文本位置与float作用

先解决第一个核心问题：蓝色盒子背景不显示的原因

你的三个盒子里，.boxupperleft左浮动、.boxright右浮动，这两个元素会脱离正常文档流，只占据自身内容的空间；而.boxlowerleft是普通块级元素（未设置浮动），它会在正常文档流中布局——也就是说，它会试图占据父容器的整行宽度，同时排在所有浮动元素的下方。

但因为.boxright的高度是200px（比红盒子的100px高），蓝盒子的高度只有100px，所以蓝盒子的整个区域其实被绿盒子的下半部分完全覆盖了，自然看不到蓝色背景。

当你给.boxlowerleft加上float: left后，它也变成了浮动元素，会加入到左浮动的布局队列里，排在红盒子的正下方，占据左半部分50%的宽度，此时它和绿盒子（右浮动）是并排的上下布局，不会被绿盒子覆盖，背景也就显示出来了。

接下来解释第二个问题：为什么Text1和Text3不在盒子顶部，Text2却在？

这是浏览器默认样式导致的：<p>标签自带默认的margin-top和margin-bottom值（通常是16px左右）。

• 对于浮动元素（.boxupperleft和.boxright）：浮动元素不会和子元素发生外边距折叠，所以<p>的margin-top会直接作用在盒子内部，把文本往下推，看起来就不在盒子顶部。
• 对于普通块级元素（.boxlowerleft）：正常文档流中的块级元素会和子元素发生外边距折叠，<p>的margin-top会和.boxlowerleft的margin-top合并成一个，而.boxlowerleft本身默认margin-top为0，所以最终没有额外的上边距，Text2就紧贴盒子顶部了。

最后给你修正后的完整代码，解决所有问题：

/* 先重置p标签的默认margin，避免布局干扰 */
p {
  margin: 0;
}

.boxupperleft { 
  float: left; 
  width: 50%; 
  height: 100px; 
  background: red; 
}
.boxright { 
  float: right; 
  width: 50%; 
  height: 200px; 
  background: green; 
}
.boxlowerleft { 
  float: left; /* 加上浮动，让蓝盒子正常显示 */
  width: 50%; 
  height: 100px; 
  background: blue; 
}
/* 可选：清除浮动，避免父容器高度塌陷 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

<div class="clearfix"> <!-- 包裹浮动元素，清除浮动影响 -->
  <div class='boxupperleft'> <p>Text1</p> </div>
  <div class='boxright'> <p>Text3</p> </div>
  <div class='boxlowerleft'> <p>Text2</p> </div>
</div>

补充说明：加上clearfix类是为了避免父容器因为内部都是浮动元素而高度塌陷，这是浮动布局中很常见的处理技巧。

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