CSS Floats未按预期工作：移除border后内容移位求助

嘿，这个问题我太熟了——这就是典型的浮动元素引发的父容器高度塌陷问题！

问题根源解释 #

当你的<section>里的元素都使用了float属性时，父容器（也就是这个section）默认不会计算浮动元素的高度，会直接“塌陷”成高度为0的状态。而当你给section加上border时，浏览器的渲染机制会让border触发一种隐性的包裹行为，间接让父容器“感知”到浮动元素的存在，所以显示看起来正常；一旦移除border，塌陷问题就立刻暴露，导致内部内容移位。

可行的解决方案 #

这里给你几个常用且靠谱的解决办法：

• 伪元素清除法（推荐）：给你的section添加一个类（比如.clearfix），然后在CSS里写：

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
  

  这种方式不需要额外添加HTML元素，完全通过CSS解决，是目前行业内的最佳实践。

• BFC触发法：给section设置overflow: auto或者overflow: hidden，这样能让父容器形成块级格式化上下文（BFC），从而自动包裹住内部的浮动元素。如果你的内容有超出容器的需求，优先选overflow: auto，避免hidden裁剪掉超出的内容。

• 额外清除元素法（不推荐）：在section的最后添加一个空的<div>标签，然后给这个div设置clear: both。这种方法虽然有效，但会增加冗余的HTML元素，不利于代码维护，现在已经很少用了。

只要按照上面的方法处理，移除border后内容移位的问题就能解决啦！

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