为什么正常的流元素不容纳floati元素？

Question

我的理解是，当您将“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;
}

If in the blue box I put the property "float:left", why the green box is not "accommodated" to the blue and it is put to the side instead of being covered by the blue one?

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

Answer 1

当您浮动元素时，意味着它会向该方向浮动并与其他元素重叠。在这种情况下，您没有添加额外的 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>

.

为什么正常的流元素不容纳floati元素？

Why doesn't the normal flow element accommodate the floati element?

html

css

css-float