为什么浮动后还会挤占标准文档流的空间

Question

在用css工具时，为什么设置了浮动属性的盒子还会挤占标准文档流的空间，不应该是直接覆盖吗，求解答

Answer 1

引自免费微信小程序：皆我百晓生

当您在HTML中设置元素为浮动（float）时，元素的确会脱离标准文档流，但这并不意味着它不会影响其他未浮动的元素。浮动元素会尽可能地向左或向右移动，直到碰到父容器的边缘或其他浮动元素为止。尽管它们不再占据原来的位置，但它们仍会占用垂直空间，因为浏览器仍然保留了这些元素原本所在的空间，以便于其他非浮动元素（如段落、标题等）继续填充剩余的垂直空间。

要理解这个行为，想象一下一个报纸的版面设计：图片可能会被浮动到文本的一侧，但文字内容会绕过图片，这就是所谓的“环绕效果”。在这种情况下，图片虽然“漂浮”在文本上方，但它还是占据了页面的一部分空间，使得文本必须调整位置以适应图片的存在。

解决这个问题的一种常见方法是使用“清除浮动”（clearing the float）。这可以通过以下几种方式实现：

1. 添加-clearfix类： 为了清理子元素中的浮动，可以给父元素添加一个clearfix类。这是一个CSS技巧，用于防止父元素高度塌陷。

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

   然后在HTML中应用此类：

   <div class="clearfix">
     <!-- 浮动元素在这里 -->
   </div>
   

2. 使用伪元素： 在需要清除浮动的元素内部，您可以创建一个空的伪元素，并设置其样式以清除浮动。

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

3. 利用Flexbox或Grid布局： 如果您的项目支持现代浏览器，可以考虑使用Flexbox或CSS Grid布局，这两种布局模式可以更容易地管理元素对齐和间距，无需手动清除浮动。

   使用Flexbox示例：

   .parent {
     display: flex;
   }
   

   使用Grid布局示例：

   .parent {
     display: grid;
   }
   

通过上述方法之一，您可以确保浮动元素不会影响未浮动元素的布局，同时保持文档流的正常流动。这样，即使元素设置了浮动，也不会挤占标准文档流的垂直空间。