任何人都可以告诉我为什么给定float属性的块级元素确实表现得很奇怪?我想了解当我们给出一个float属性时元素[block或inline]实际发生了什么.
下面是代码和小提琴:
floatfoobarbaz
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 和CSSout规格的图表中包装文本.
有各种解决方法,但display: inline-block
如果你想要并排的块,你可能会更好,使用flexbox或CSS网格.