为何设置display:block后button无法被float的<div>覆盖？

核心问题出在浮动元素的布局逻辑上，跟你设置display:block没关系：

• 浮动元素（比如你设了float:left的.box）确实会脱离常规文档流，但它没完全脱离视觉流——浏览器会让后面的元素避开浮动元素的位置，但不会让浮动元素直接覆盖后面的块级元素。
• 你给按钮加display:block，只是把它从默认的行内块改成独占一行的块级元素而已，但块级元素的布局空间还是会被浮动元素“挤开”：两个.box占了左侧202px的宽度（100px宽+1px边框*2），按钮就自动从右侧开始排列，而不是被压在下面。

你可以自己试一下给按钮加个background: #ccc，就能看到按钮的实际盒子是铺满整个容器宽度的，只是文字被挤到了浮动div的右边，并不是按钮真的只在div旁边。

要实现覆盖效果，得改元素的定位规则——比如给按钮加position: relative; z-index: -1，或者给浮动div加更高的z-index（同时得给浮动div设非static的定位，比如position: relative），因为只有定位元素才会参与层级堆叠，常规文档流的块级元素没法跟浮动元素比层级。

内容的提问来源于stack exchange，提问作者주재원