的原因

Question

假设你有一个div，说你把它涂成绿色并给它一个明确的宽度，当我把东西放进去时，在我的情况下是一个img和另一个div。这个想法是容器div的内容将导致容器div伸展出来，并成为内容的背景。但是当我这样做时，包含的div缩小以适应非浮动对象，并且浮动对象将要么一直出来，要么是一半，一半，并且与大div的大小没有任何关系。

这是为什么？有没有我缺少的东西，我如何获得浮动物品来拉伸包含div的高度？

Answer 1

最简单的方法是将overflow:hidden放在父div上，不要指定高度：

#parent { overflow: hidden }

另一种方法是浮动父div：

#parent { float: left; width: 100% }

另一种方法是使用clear元素：

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

<强> CSS

span.clear { clear: left; display: block; }

Answer 2

的原因

问题是浮动元素是out-of-flow：

如果一个元素被浮动，那么它就被称为 out of flow 定位，或是根元素。

因此，它们不会影响周围的元素，因为in-flow元素会。

9.5 Floats中解释了这一点：

由于浮动不在流中，因此创建了未定位的块框在浮动箱垂直流动之前和之后，好像浮子没有存在。但是，旁边创建的当前和后续行框必要时缩短浮子以为边缘盒腾出空间浮动。

＆＃13;

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling:after {
  content: 'Block sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}

＆＃13;

<div class="float"></div>
<div class="block-sibling">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>

＆＃13;

这也在10.6 Calculating heights and margins中指定。对于"normal" blocks，

只考虑正常流量的儿童（即浮动框和绝对定位的框被忽略[...]

＆＃13;

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent:after {
  content: 'Block parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 130px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}

＆＃13;

<div class="block-parent">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>

＆＃13;

Hacky解决方案：清除

解决问题的一种方法是强制将一些in-flow元素放在所有浮点数下面。然后，父级的高度将增长以包裹该元素（因此也包括浮点数）。

这可以使用the clear property：

来实现

此属性指示元素框的哪些边可能不与较早的浮箱相邻。

＆＃13;

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent:after {
  content: 'Block parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 84px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}
.clear {
  clear: both;
  text-align: center;
  height: 37px;
  border: 3px dashed pink;
}
.clear:after {
  position: static;
  content: 'Block sibling with clearance';
  color: pink;
}

＆＃13;

<div class="block-parent">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra.
  <div class="clear"></div>
</div>

＆＃13;

所以解决方案是添加一个空元素clear: both作为花车的最后一个兄弟

<div style="clear: both"></div>

然而，这不是语义上的。因此，最好在父级的末尾生成pseudo-element：

.clearfix::after {
  clear: both;
  display: block;
}

这种方法有多种变体，例如：使用已弃用的单冒号语法:after来支持旧浏览器，或使用display: table等其他block-level显示。

解决方案：BFC根

开头定义的有问题的行为有一个例外：如果一个块元素建立一个Block Formatting Context（是一个BFC根），那么它也会包装它的浮动内容。

根据10.6.7 'Auto' heights for block formatting context roots，

如果元素有任何浮动后代的底边缘在元素的底部内容边缘下方，则高度为增加到包括那些边缘。

＆＃13;

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent.bfc-root:after {
  content: 'BFC parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 127px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}
.bfc-root {
  overflow: hidden;
}

＆＃13;

<div class="block-parent bfc-root">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>

＆＃13;

此外，正如9.5 Floats所述，由于以下原因，BFC根也很有用：

表的边框，块级替换元素或正常流程中的元素，用于建立新的块格式上下文[...]不得与任何浮点数的边距框重叠阻止格式化上下文作为元素本身。

＆＃13;

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling.bfc-root:after {
  content: 'BFC sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}
.bfc-root {
  overflow: hidden;
}

＆＃13;

<div class="float"></div>
<div class="block-sibling bfc-root">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>

＆＃13;

块格式化上下文由

建立

使用visible以外的overflow的阻止框，例如hidden

.bfc-root {
  overflow: hidden;
  /* display: block; */
}

阻止不是阻止框的容器：当display设置为inline-block，table-cell或table-caption时。
```
.bfc-root {
  display: inline-block;
}
```
浮动元素：当float设置为left或right时。
```
.bfc-root {
  float: left;
}
```
绝对定位的元素：当position设置为absolute或fixed时。
```
.bfc-root {
  position: absolute;
}
```

请注意，这些可能会产生不受欢迎的附带影响，例如剪切溢出的内容，使用shrink-to-fit算法计算自动宽度或变得不流动。所以问题在于，不可能有一个具有可见溢出的流内块级元素来建立BFC。

Display L3解决了这些问题：

创建flow和flow-root inner display types以更好地表达流程布局display types 创建一个显式开关，使元素成为BFC根。（这应该消除对::after { clear: both; }和overflow: hidden [...]
等黑客的需求

可悲的是，目前还没有浏览器支持。最终我们可以使用

.bfc-root {
  display: flow-root;
}

Answer 3

将您的浮动div(s)放在div中，然后在CSS中为其overflow:hidden;提供它会正常工作。

Answer 4

没有什么遗漏。 Float是为您希望图像（例如）放在几段文本旁边的情况而设计的，因此文本会在图像周围流动。如果文本“拉伸”容器，那就不会发生。你的第一段会结束，然后你的下一段将在图像下面开始（可能在下面几百个像素）。

这就是为什么你得到的结果。

Answer 5

W3Schools推荐：

将overflow: auto放在父元素上，它将“着色”整个背景，包括元素边距。浮动元素也将留在边界内。

http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix

Answer 6

在某些情况下，即何时（如果）您只是使用float让元素在相同的＆＃34;行＆＃34;上流动，您可以使用

display: inline-block;

而不是

float: left;

否则，在最后使用clear元素工作，即使它可能违背谷物需要一个元素来做CSS应该工作。

Answer 7

这是更现代的方法：

.parent {display: flow-root;}

没有更多明确的修正。

P.S。使用溢出：隐藏;隐藏盒子阴影......

Answer 8

谢谢你 LSerni 你为我解决了这个问题。

实现这一目标：

+-----------------------------------------+
| +-------+                     +-------+ |
| | Text1 |                     | Text1 | |
| +-------+                     +-------+ |
|+----------------------------------------+

你必须这样做：

<div style="overflow:auto">
    <div style="display:inline-block;float:left"> Text1 </div>
    <div style="display:inline-block;float:right"> Text2 </div>
</div>

Answer 9

正如Lucas所说，你所描述的是float属性的预期行为。让很多人感到困惑的是，为了弥补CSS布局模型中的缺点，浮动已经超出了原来的预期用途。

如果您希望更好地了解此属性的工作原理，请查看Floatutorial。

Answer 10

您可以轻松进行以下操作：首先可以使div flex并向右或向左应用对齐的内容，问题就得到解决。

<div style="display: flex;padding-bottom: 8px;justify-content: flex-end;">
					<button style="font-weight: bold;outline: none;background-color: #2764ff;border-radius: 3px;margin-left: 12px;border: none;padding: 3px 6px;color: white;text-align: center;font-family: 'Open Sans', sans-serif;text-decoration: none;margin-right: 14px;">Sense</button>
				</div>

Answer 11

这里的其他解决方案对我不起作用 - 我的元素不断被切断。但是，如果其他人使用 bootstrap 来到这里，我可以将中间行 div 的 X 轴边距显式设置为零并设置 justify-content-between:

<div class='container p-2'>
  <div class='row mx-0 justify-content-between'>
    <div class='float-left'></div>
    <div class='float-right'></div>
  </div>
</div>

div中的浮动元素浮动在div之外。为什么？

11 个答案:

的原因

Hacky解决方案：清除

解决方案：BFC根