浮动和块级元素

Question

任何人都可以告诉我为什么给定float属性的块级元素确实表现得很奇怪？我想了解当我们给出一个float属性时元素[block或inline]实际发生了什么.

下面是代码和小提琴:

<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 [蓝色]区域内

Answer 1

这是因为浮动的最初预期目的不是将块元素并排放置,而是重现传统的印刷效果,即在图2 和CSSout规格的图表中包装文本.

有各种解决方法,但display: inline-block如果你想要并排的块,你可能会更好,使用flexbox或CSS网格.