HTML中div盒子摆放问题--边界塌陷问题处理

问题描述

div盒子摆放问题，页面布局中利用float调整盒子位置是出现边界塌陷，实现在一列放多个div并调整位置

解决方案：

css使用浮动float,

全部div使用浮动 => 最外层div添加浮动

注意：浮动完之后要清除浮动回到标准流==防止位置错乱

方法：在浮动div的下一个div进行清除浮动=>clear: both（缺点：不灵活，每次多出一个div）

边界塌陷最优解决办法：伪元素

<before>和<after>标签默认存在

 

 为伪元素加内容，并将其改为块元素，最后清除浮动

终极版，清理上边缘重叠与浮动：

 在最外层div用伪元素清理上下边缘。