浮动和块级元素 [英] Float and block level elements

问题描述

有人可以告诉我为什么给定float属性的块级元素的行为奇怪吗?我想了解当我们提供float属性时，元素[block或inline]实际上发生了什么.

Can anyone tell me why do the block level elements given float property does behave oddly? I want to understand what actually happens to an element[block or inline] when we give a float property.

下面是代码和小提琴:

<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]块

My curosity, it is still in the normal flow but its now positioned inside the foo[blue] block

推荐答案

这是因为浮点数的最初目的不是将块元素并排放置，而是重现了将文字环绕图像和<从CSS 2规范的此图中可以看出，a href ="https://en.wikipedia.org/wiki/Boxout" rel ="nofollow noreferrer">盒装.

It is because the original intended purpose of floats was not to put block elements side by side, but to reproduce the traditional typographical effect of wrapping text around images and boxouts as seen in this diagram from the CSS 2 spec.

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

There are various workarounds, but you'd probably be better off with display: inline-block, flexbox or CSS grids if you want side-by-side blocks.

这篇关于浮动和块级元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！