任何人都可以告诉我为什么给定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;
}
我的好奇心,它仍处于正常流动状态,但它现在位于foo [蓝色]区域内
解决方法
这是因为浮动的最初预期目的不是将块元素并排放置,而是为了重现传统的排版效果,即在图2和CSS 2000中包装文本,如CSS 2规范所示.
有various workarounds,但你可能会更好的显示：内联块,flexBox或CSS网格,如果你想要并排块.
