为什么普通流元素不能容纳浮点元素？

问题描述

我的理解是，当你将“float:left”属性设置为一个HTML元素时，基本上会发生以下步骤：

属性为“float:left”的元素从正常流程。
其他元素以正常方式定位，就好像该元素一样不存在。
现在，浮动元素被“对齐”到最左边和最上面可能直到它接触到页面边缘或接触到边缘另一个元素。

在这个例子中：

index.html：

<html>
  <head></head>
  <body>
    <div id="BoxBlue"></div>
    <div id="BoxGreen"></div>
  </body>
</html>

style.css：

div{ 
  width:100px; 
  height:100px; 
  border:8px solid #333;
}
#BoxBlue{  
  background-color:blue;
  float:left;      
}
#BoxGreen {  
  background-color:green;
}

如果在蓝色框中我放置了属性“float:left”，为什么绿色框没有“适应”蓝色，而是放在一边而不是被蓝色覆盖？

在这里你可以更直观地看到我说的话： https://codepen.io/correocontenedor/pen/rNWxXGo

解决方法

当你浮动元素时，意味着它会向这个方向浮动并与其他元素重叠。在这种情况下，您没有添加额外的 CSS 来使它们适应，但针对您的情况的一个简单修复是将 display:inline-block 添加到 #boxGreen 这将使它们适应。这将并排显示元素

div{ 
  width:100px; 
  height:100px; 
  border:8px solid #333;
}
#boxBlue{  
  background-color:blue;
  float:left;      
}
#boxGreen {  
  background-color:green;
  display: inline-block;
}

<div id="boxBlue">
</div>
<div id="boxGreen">
</div>

css-float html