浮动和块级元素答案

【问题标题】：Float and block level elements浮动和块级元素
【发布时间】：2016-03-15 11:25:24
【问题描述】：

谁能告诉我为什么给定 float 属性的块级元素的行为很奇怪？我想了解当我们提供浮点属性时元素[块或内联]实际发生了什么。

下面是代码和小提琴：

<div class="container violet">
  <div class="float red">float</div>
  <div class="foo blue">foo</div>
  <div class="bar green">bar</div>
  <div class="baz orange">baz</div>
</div>

CSS

.float {
  float: left;
}
.foo {
  padding-top: 10px;
}
.bar {
  width: 30%;
}
.baz {
  width: 40%;
}

.violet{
  background-color: violet;
}
.red{
  background-color: red;
}
.blue{
  background-color: blue;
}  
.green{
  background-color: green;
}
.orange{
  background-color: orange;
}

http://jsfiddle.net/gcazev14/

我的好奇心，它仍然在 正常流程中，但它现在位于 foo[blue] 块内

【问题讨论】：

浮动元素在 dom 中不占用任何空间，除了它们的特定内容或您分配给它们的特定大小/宽度。即便如此，你会发现兄弟元素会“拉伸”，使得兄弟元素的左侧（小提琴中的“foo”）一直到浮动元素的左侧（小提琴中的“float”）

标签： html css

【解决方案1】：

这是因为浮动的最初预期目的不是将块元素并排放置，而是重现将文本环绕在图像和 boxouts 周围的传统印刷效果，如 CSS 2 规范中的图表所示。

有various workarounds，但如果你想要并排的块，你可能最好使用display: inline-block、flexbox 或 CSS 网格。

【讨论】：

【解决方案2】：

当您浮动一个元素时，它会将其带出正常流程。如果您在没有任何其他兄弟姐妹的情况下检查它的父元素，则父元素将没有高度。浮动元素实际上穿透了其父元素的底部。

浮动元素也会使其宽度折叠到其内容的宽度（如果有的话）。这意味着，如果它没有内容，它将是 0 宽度。所以，如果你想让它有一定的宽度，你必须设置它。

如果你希望父元素包含它，你要么需要一个兄弟元素来使用“clear: both”清除浮动，或者你需要像 bootstrap 那样使用“.clearfix”（Understanding Bootstrap's clearfix class )

根据您希望浮动元素的兄弟姐妹如何与之交互，您可能还需要浮动它们。

【讨论】：