div浮动属性解释

Question

根据www1： “float 属性可以具有以下值之一： left - 元素浮动到其 container 的左侧” 还有 "In HTML, the container is the area enclosed by the beginning and ending tags. "(www2)

在下面的代码中（1中的代码）：

.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div2 {
  border: 1px solid red;
}
<body>
<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
</body>

问题是：

body元素是div1的容器吗？
如果是，div1浮动到左边。我猜它结束了浮动的功能。为什么文字在 div2 周围流动 div1?

Answer 1

因此，在您的示例中，我的回答了您的问题：

是
考虑所有您分配给 div1 class - 你已经分配了一个边距（因此取代了 div2 中的文本），并且 'floating' 是 div 到左边. div 标签本身没有 float: 属性 - 在没有属性的情况下，它的行为是原生的 - 保持其位置，采取向上扩展其容器的整个宽度。

下面的截图是为了形象化我在上面 #2

中想说的内容

哦，float: CSS 指令不是函数 - 而是应用于元素的样式在可见的 DOM 上。就我个人而言，根据我想要完成的目标，如果可以的话，我几乎从不在生产中使用 float。

div浮动属性解释

div float property explanation

css

css-float