父元素（div盒子）在子元素存在float浮动的情况下，如何做到父元素容器自适应？
以下答案引用自GPT-3大模型,请合理使用：
。
这个问题比较复杂。先来看一个简单的例子：
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自适应容器</title> </head> <body> <div class="container"> <div class="inner">Hello world!</div> </div> </body> </html>
CSS
.container { width: 100%; height: 100px; } .inner { width: 50%; height: 50px; margin: 10px auto; text-align: center; }
这个HTML代码的效果如下图所示：
图1
在浏览器中调整宽度和高度，可以看到.inner盒子会自适应，而.container容器则不会发生变化。
针对上面的例子，如果.inner盒子有float:left;属性，效果就会变成如下图所示：
图2
由于.inner盒子有float:left;属性，它会把父元素容器.container排到右侧，而不是像图1的效果那样是放在容器的正中部。
为了让.container容器也能自适应，可以通过下面的CSS代码解决这个问题：
.container { width: 100%; height: 100px; } .inner { width: 50%; height: 50px; margin: 10px auto; text-align: center; float: left; }
这样.container容器就能够适应.inner盒子的float:left;属性，图2的效果就会变成如下图所示：
图3
注意：如果.inner盒子没有float:left;属性，那么.container容器就不会有变化。