实时效果如下
文章插图
完整代码可访问 float-auto-text-fixed (codepen.io)[11]
六、总结和说明上面介绍了浮动布局的几个常用案例 ， 相信能适用于绝大部分布局 ， 当然并不是推荐大家一定要使用浮动布局 ， 甚至有时候布局混乱（HTML结构与视觉不一致）、实现啰嗦（嵌套层级多）等情况 ， 但是在不兼容 flex 布局的浏览器中还是挺有用的（低于IE10） ， 甚至还有仅仅只能使用浮动才能实现的布局（文本环绕） 。这里总结如下
1.通过 BFC 实现自适应弹性布局 ， float + overflow2.浮动的影响范围是由浮动元素在 HTML 中的结构决定的3.通过设置最大宽度实现文本跟随效果（fit-content也可以）4.其他布局可相互组合实现5.另外这些 float 实现方式全兼容（IE6+） ， 可以放心使用
随着 IE 地逐渐退去 ， 有些布局也会慢慢地淡出 ， 就像早年的 table 布局一样 。但浮动布局一直在往新特性上发展 ， 比如 Shapes 布局[12]就需要浮动做支持 ， 另外 ， 浮动布局也在慢慢支持逻辑属性 ， 比如 float: inline-start 。最后 ， CSS 最重要的是灵活性 ， 多一种思路总是没错的 。如果觉得还不错 ， 对你有帮助的话 ， 欢迎点赞、收藏、转发???
References[1] 阅文作家专区 (qq.com):
推荐阅读
- CSS的调用方式有哪些？
- CSS 文本超出提示效果
- 华为|华为回应元宇宙布局：典型的炒作期 已找到其本质
- 注意全客厅的色彩及明暗 客厅风水布局之宜
- 作为Web开发人员应避免的10种CSS做法
- css加载loading效果的片段
- 一些不好记却很好用的 CSS 属性
- CSS中px, vw, vh单位
- 丢掉JS，CSS也可以独立完成许多牛掰的功能
- 商业风水好坏与选址布局密不可分