Html 为什么'；正常流量元件是否容纳浮动元件？_Html_Css_Css Float

Html 为什么'；正常流量元件是否容纳浮动元件？

html css

Html 为什么'；正常流量元件是否容纳浮动元件？,html,css,css-float,Html,Css,Css Float,我的理解是，当您将“float:left”属性设置为HTML元素时，基本上会发生以下步骤：属性为“float:left”的元素从正常流量其他元素以正常方式放置，就像该元素一样不存在现在，浮动元素被“捕捉”到尽可能远的左侧和上方可能，直到它接触到页面边缘或接触到页面边缘另一个元素的在本例中： index.html: <html> <head></head> <body> <div id="boxBlue

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

属性为“float:left”的元素从正常流量

其他元素以正常方式放置，就像该元素一样不存在

现在，浮动元素被“捕捉”到尽可能远的左侧和上方可能，直到它接触到页面边缘或接触到页面边缘另一个元素的

在本例中：

index.html:

<html>
  <head></head>
  <body>
    <div id="boxBlue"></div>
    <div id="boxGreen"></div>
  </body>
</html>

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

如果我把属性“float:left”放在蓝色框中，为什么要放在绿色框中不是“容纳”到蓝色，而是放在侧面，而不是被蓝色的那个遮住了

在这里，你可以更直观地看到我所说的：

浮动元素时，意味着它将向该方向浮动，并与其他元素重叠。在本例中，您没有添加额外的CSS以使其适应，但是一个简单的修复方法是将

display:inline block

添加到

#boxGreen

中，这将使它们适应。这将并排显示元素

div{
宽度：100px；
高度：100px；
边框：8px实心#333；
}
#箱蓝{
背景颜色：蓝色；
浮动：左；
}
#boxGreen{
背景颜色：绿色；
显示：内联块；
}

因为它是块元素