div内浮动元素，div外浮动元素，为什么?

假设你有一个div，给它一个确定的宽度，并在其中放置元素，在我的例子中是img和另一个div。

这个想法是，容器div的内容将导致容器div伸展，并成为内容的背景。但当我这样做时，包含div的区域会缩小以适应非浮动对象，浮动对象会一直向外，或者一半向外，一半向内，并且与大div的大小没有任何关系。

为什么会这样?是否有我错过的东西，我如何才能得到浮动项目伸展的高度包含div?

当前回答

谢谢你，塞尔尼，你帮我解决了。

要做到这一点:

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

2016-11-23 17:19:35

其他回答

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

2021-03-11 22:53:49

谢谢你，塞尔尼，你帮我解决了。

要做到这一点:

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

2016-11-23 17:19:35

W3Schools推荐:

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

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

2016-03-05 11:03:19

以下是更现代的方法: