为什么HTML/CSS布局中article.big块无法显示在div.small块右侧？

你的问题出在仅给左侧div.small设置了左浮动，没有对右侧的article.big做适配排版的处理：

1. div.small设置float: left后脱离了正常文档流，作为块级元素的article.big默认会占满父容器div.all的整行宽度，盒子会直接从父容器左上角开始渲染，视觉上就被左侧浮动的div.small挤到了下方
2. 经核对宽度：div.small的实际宽度由内部子元素撑开为312px，article.big宽度496px，二者相加312+496=808px，小于父容器div.all的824px，宽度足够两个元素并排摆放。

你可以任选以下两种方案修复：

• 方案1：给右侧元素也设置左浮动
  在CSS中补充如下规则即可，浮动元素会按书写顺序从左到右排列，宽度足够时就会并排展示：

article.big {
  float: left;
}

• 方案2：给右侧元素触发BFC（块级格式化上下文）
  补充如下规则，触发BFC后的元素不会和左侧浮动元素重叠，会自动占据浮动元素右侧的剩余可用空间，更适配响应式布局场景：

article.big {
  overflow: hidden;
}

额外优化建议：你目前给父容器div.all写死了高度暂时不会出现浮动高度塌陷问题，后续如果要兼容动态内容，建议给父容器增加清浮动规则：

div.all::after {
  content: "";
  display: block;
  clear: both;
}

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