为什么设置section为float: right后未显示为body的一部分？

你观察到的section视觉上不归属body容器的现象，本质是浮动元素引发的高度塌陷：元素设置float后会脱离常规文档流，父级容器默认计算自身高度时，不会把内部浮动元素的尺寸算进去。哪怕DOM结构里section确实是body的后代元素，视觉上也会因为父级没被浮动元素撑开高度，看起来飘在容器外。

完全不需要修改section的width: 500px和float: right设置，只需要给包裹section的父级main元素增加清浮动规则，就能让main自动把内部浮动的section算进高度计算里，连带把body的高度撑开，让section完整落在body的绿色背景范围内，同时不影响你后续在section左侧新增内容的需求。

推荐方案：伪元素清浮动（无副作用，灵活度高） #

在现有CSS中追加如下规则：

main::after {
  content: "";
  display: block;
  clear: both;
}

这个方法是行业内通用的清浮动方案，不会裁切内部内容，也没有兼容性问题，后续不管你怎么调整左侧内容的长度、修改section的尺寸，main和body的高度都会自动适配。

快速方案：触发BFC撑开父级 #

直接修改现有main的CSS规则，加上overflow: auto属性即可：

main {
  clear: left;
  overflow: auto;
}

这个方法代码量少，但有一定局限性：如果后续main内部有超出容器范围的元素（比如下拉导航、悬浮阴影），会被意外裁切，仅适合简单静态页面使用。

• 不要通过给body手动设置固定高度的方式“撑出”容器范围，后续页面内容增多时，固定高度会导致内容溢出，维护成本很高
• 你当前的尺寸设计刚好适配布局：body总宽800px，section占500px居右，剩余300px的空间可以直接放置后续要新增的左侧内容，不需要额外调整section的浮动或宽度设置

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