Say you have a div , give it a definite width and put elements in it, in my case an img and another div . 这个想法是容器的内容 div 将导致容器 div 伸展，并成为内容的背景。但是当我这样做时，包含的 div 收缩以适应非浮动对象，并且浮动对象要么一直在外面，要么一半在外面，一半在里面，对大尺寸 div 。为什么是这样？有没有我遗漏的东西，我怎样才能让浮动项目伸展 height 包含 div ？原文由 DavidR 发布，翻译遵循 CC BY-SA 4.0 许可协议

最简单的方法是将 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; } 原文由 Doug Neiner 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原因

问题是浮动元素流出：

如果元素是浮动的、绝对定位的或者是根元素，则该元素被称为 _流外_。

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

这在 9.5 Floats 中有解释：

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

 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>

Hacky解决方案：清除

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

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

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

 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’ heights for block formatting context roots ，

如果该元素有任何浮动后代，其底部外边距边缘低于该元素的底部内容边缘，则高度会增加以包括这些边缘。

 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 Floats 所述，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;
  }

浮动元素：当 float 设置为 left 或 right 。

   .bfc-root {
    float: left;
  }

绝对定位元素：当 position 设置为 absolute 或 fixed 。

   .bfc-root {
    position: absolute;
  }

请注意，这些可能会产生不良的附带影响，例如裁剪溢出的内容、使用收缩以适应算法计算自动宽度或变得流出。所以问题是不可能有一个具有可见溢出的流入块级元素来建立 BFC。

Display L3 解决了以下问题：

创建了 flow 和 flow-root 内部显示类型，以更好地表达流布局显示类型并创建显式开关以使元素成为 BFC 根。（这应该消除像 ::after { clear: both; } 和 overflow: hidden […] 这样的黑客攻击的需要）

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

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

原文由 Oriol 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原因

Hacky解决方案：清除

解决方案：BFC 根

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译