博客内容探讨了CSS中浮动元素（float）如何在脱离文档流的情况下，依然适应其父容器的宽度。作者通过示例代码和观察，发现在某些情况下，即使浮动元素内部的内容超过其自身宽度，它仍然会自适应父容器的宽度。文章提到了BFC（块格式化上下文）在解决父容器高度塌陷问题上的应用，并补充说明，即使元素脱离文档流，仍会受到文档流的限制。
希望有朋友能帮忙解答！
自己对于这块的理解：作为一个浮动元素，其应该是脱离了文档流的，而其父容器是属于文档流的，那这个浮动元素的宽度又是根据什么来计算的呢？为什么其脱离了文档流，却会去适应文档流的父容器的宽度呢？样例如下列格式：
(样例参照张鑫旭老师《css世界》6.1章节魔鬼属性float 所写，当然前提是排除掉文字不换行和长串英文字符)
<div class="parent">
<div class="float">
<img src="1.jpg"/>帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅！
</div>
</div>
.parent{
width: 200px;
}
.float{
float: left;
}
.float img{
width: 128px;
}
此时结果如图所示：
此时float元素很神奇的自适应父容器宽度了，但是父容器是高度塌陷的（如果想要让父容器出现高度，可以将父容器设置为BFC元素）
（2018年8月31日18:58更新：如果将文字内容替换成不超过图片宽度的something，f
最低0.47元/天 解锁文章
扫一扫
1452
到【灌水乐园】发言
