浮动和块级元素

Question

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

以下是代码和小提琴：

<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

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

有various workarounds，但如果你想要并排的阻止，你可能会更好地使用SELECT ((SELECT count(*) FROM validation WHERE request_date BETWEEN (SYSDATE - 30/(24*60)) AND SYSDATE AND response != 'VERIFIED') / count(*)) AS percentage FROM (SELECT * FROM validation WHERE request_date BETWEEN (SYSDATE - 30/(24*60)) AND SYSDATE) ; ，flexbox或CSS网格。

Answer 2

浮动元素时，它会将其从正常流中取出。如果您在没有任何其他兄弟姐妹的情况下检查它的父级，则父元素将不具有高度。浮动元素实际上穿过其父元素的底部。

浮动元素也会使其宽度折叠到其内容的宽度（如果有）。这意味着，如果它没有内容，它将是0宽度。所以，如果你想要它有一定的宽度，你必须设置它。

如果您希望父级包含它，您需要一个兄弟元素来清除浮动，使用＆＃34;清除：两者都是＆＃34;或者你需要做一些像bootstrap这样的事情＆＃34; .clearfix＆＃34; （Understanding Bootstrap's clearfix class）

根据您希望浮动元素的兄弟姐妹与它交互的方式，您可能还需要浮动它们。