小开

最佳答案

最简单的方法是将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; }

小开

什么都没少。Float是为这样的情况而设计的:例如，您想要一个图像(例如)位于几个文本段落旁边，因此文本围绕着图像流动。如果文本“拉伸”容器，就不会发生这种情况。你的第一段会结束，然后你的下一段会在图片下面开始(可能是下面几百个像素)。

这就是你得到这个结果的原因。

小开

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

如果你想更好地理解这个属性是如何工作的，可以看看Floatutorial。

小开

将浮动div(s)放在div中，并在CSS中赋予它overflow:hidden;

小开

原因

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

如果一个元素是浮动的，它就被称为不流动

因此，它们不会像子元素那样影响周围的元素。

这在9.5浮动中解释了:

由于浮动不在流中，因此创建了非定位块盒浮子盒前后垂直流动，好像没有浮子一样存在。但是，在旁边创建的当前和后续行框浮盘根据需要被缩短，以便为边距箱腾出空间

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;
}

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

这也是在10.6计算高度和边距中指定的。“正常”的块,

只有正常流中的孩子才会被考虑(即，浮动框和绝对定位框被忽略[…])

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;
}

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

简单的解决方案:清场

解决这个问题的一种方法是强制将一些流内元素放置在所有浮动的下面。然后，父元素的高度会增长以包装该元素(因此浮动也会增加)。

这可以使用clear属性来实现:

此属性指示元素的框的哪些边可以not
.
.

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;
}

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

因此，一个解决方案是添加一个空元素，clear: both作为浮点数的最后一个兄弟元素

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

然而，这不是语义上的。所以最好在父类的末尾生成伪元素:

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

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

解决方案:BFC根

对于开头定义的有问题的行为有一个例外:如果块元素建立了块格式背景信息(是BFC根)，那么它也会包装它的浮动内容。

根据10.6.7用于块格式化上下文根的“Auto”高度，

如果元素有任何浮动子代，其底边距为是在元素的底部内容边下面，那么高度是

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;
}

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

此外，正如9.5浮动所解释的，BFC根也很有用，因为以下原因:

表的边框框、块级替换元素或元素的边框框元素，它建立一个新的块格式上下文[…]不能与同一个浮动的页边距框重叠块格式化上下文作为元素本身

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;
}

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

块格式化上下文由

块包含overflow而不是visible的盒子，例如hidden
```
.bfc-root {
overflow: hidden;
/* display: block; */
}
```
Block containers that are not block boxes: when display is set to inline-block, table-cell or table-caption.
```
.bfc-root {
display: inline-block;
}
```
Floating elements: when float is set to left or right.
```
.bfc-root {
float: left;
}
```
Absolutely positioned elements: when position is set to absolute or fixed.
```
.bfc-root {
position: absolute;
}
```

Note those may have undesired collateral effects, like clipping overflowing content, calculating auto widths with the shrink-to-fit algorithm, or becoming out-of-flow. So the problem is that it's not possible to have an in-flow block-level element with visible overflow that establishes a BFC.

Display L3 addresses these issues:

Created the flow and flow-root inner display types to better express flow layout display types and to create an explicit switch for making an element a BFC root. (This should eliminate the need for hacks like ::after { clear: both; } and overflow: hidden […])

Sadly, there is no browser support yet. Eventually we may be able to use

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

小开

在某些情况下，例如(如果)，你只是使用float让元素在同一“行”上流动，你可能会使用

display: inline-block;

而不是

float: left;

否则，在末尾使用clear元素就可以了，即使它可能违背了需要一个元素来做应该是CSS的工作。

小开

W3Schools推荐:

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

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

小开

谢谢你为我解决了它。

要做到这一点:

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

你必须这样做:

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

小开

以下是更现代的方法:

.parent {display: flow-root;}

不再有clearfix。

p.s. .使用overflow:隐藏;隐藏盒子阴影，所以…

小开

你可以很容易地做，首先，你可以使div伸缩和应用右或左对齐内容，你的问题就解决了。

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

小开

这里的其他解对我不起作用——我的元素一直被切断。但是如果其他人使用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外浮动元素，为什么?

原因

简单的解决方案:清场

解决方案:BFC根