html – 浮点和块级元素

任何人都可以告诉我为什么给定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 [蓝色]区域内

解决方法

这是因为浮动的最初预期目的不是将块元素并排放置,而是为了重现传统的排版效果,即在图2和CSS 2000中包装文本,如CSS 2规范所示.

有various workarounds,但你可能会更好的显示：内联块,flexBox或CSS网格,如果你想要并排块.

原文地址：https://www.jb51.cc/html/226499.html