颜如玉你信不信
overflow创建的BFC和float创建的BFC 为什么会有这样的区别？
现在的css布局，浮动用的比较少了，但是还是想 问一下 浮动的BFC。 创建BFC的情况 "https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_display/..." (https://link.segmentfault.com/?enc=TFaN5NCW6N1QZQvCd%2Ft%2BbA%3D%3D.AzjdIk%2BmZA6FNkd5xsViK7hgIJsAscCB0yTP%2FWenVQGCcQ97lE9Ts1lfO9xDfVQ6kJ6nkFgjysE2y0xwRa%2FM0t8gP4sszbz7kK6rIsXqFhi5AHYzhO5s9%2F2O4VFEUQBF) overflow:hidden 创建的BFC "https://play.tailwindcss.com/kTidNfCuyn" (https://link.segmentfault.com/?enc=mZp8YHcoHJuV3YIyiESVUw%3D%3D.RJo0RiFxdMnn5ezsTIYI3AZuDUBukpaefG7IMOSk0lkHJ%2FZtvsSbuMcpmPE423iG) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240929/238111ac6f969c50f5e98d1f344697a4.png) 特点：即便img 右侧没有足够的空间，这个BFC还是选择了在img的右侧，通过延申高度来放下文字 Float创建的BFC "https://play.tailwindcss.com/T78TTJPgxf" (https://link.segmentfault.com/?enc=jifYOd99Cjfu2TNhuQuCZw%3D%3D.boZlbOsA5c1v1rbBvEvM1vNx1HwO6I0DZJKRUioCO4tMnw9Wq3s3pJRyAlKJIQSS) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240929/704f7382c3cb4ffd68fc43b791ce729d.png) 文字比较多的受直接到下一行显示，而不是在img右侧延申高度。 文字比较少的时候： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240929/bbb1191d9ab2658d075543da4c21387f.png) 文字 再少 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240929/129bba409221712247dd3ef0ffd8cc15.png) 问题： 为什么会有这样的区别？
winkkkkk9421
为什么兄弟元素之间 display:inline-block 能防止 margin塌陷 ？
问一个关于BFC清除兄弟间margin塌陷的问题。希望有人从原理上解答解答。 如图，有两个块级元素发生垂直方向上的margin塌陷 。 https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241007/193f3c71ab6cbe18a500894db6b8a556.png 常见的做法有两种，第一种，将下方元素用另一个BFC包裹起来，这种我能理解，因为BFC之间互不影响嘛。 https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241007/cff4f438e12b0b38c355283a3413b3ed.png 第二种：为下方元素设置浮动或绝对定位或"display:inline-block"。 浮动或绝对定位我也能理解，脱离普通文档流了嘛。 "display:inline-block"我不是很懂，是因为生成了IFC，BFC和IFC之间不发生重叠？ 注意： 如果此时只是给""设置"overflow:hidden","display:flex","display:table-cell"等使其生成BFC都不会发生作用。 https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241007/174bcae1c9c9114d37675079e266cb05.png 代码如下： Document * { margin: 0; padding: 0; } .first { margin: 100px; background: lightgreen; border: 1px solid; width: 100px; height: 100px; } ul { /* display: inline-block; */ /* position: fixed; */ /* float: left; */ margin: 100px; background: lightblue; border: 1px solid; width: 200px; } li { margin: 10px 20px; } --> item1 item2 item3 --> 希望有人能解答一下关于下方元素设置"dispaly:inline-block"可以解决"margin塌陷"的原理。