CSS 浮动布局实例 _CSS

文章插图

其实文章原名叫做 “碰到不支持 flex 的项目怎么办？”
现在差不多已经是 flex 的天下了，简单灵活，但有时还是不可避免地会接触到 IE 浏览器，比如我最近接触的阅文作家专区 (qq.com)[1] ，这个就是需要兼容 IE9 ，也自然不能使用 flex 布局了。不能使用 flex 怎么办（这个项目怎么这么XX ，都 2021 年了还要兼容 IE）？那只能回归传统布局方式了，也就是浮动布局。
浮动 float 可以说是 css 布局里最为灵活的布局之一了，千万不要小瞧了浮动，有些布局只有浮动才能实现呢。下面将介绍几种常见的布局，一起看看吧
一、文本环绕布局这类布局应该就是浮动最初的用意了，比如这样的

文章插图

设置一个左浮动就可以了，实现如下

<div><strong class="float">浮</strong><p>动属性指定一个元素应沿其容器的左侧或右侧放置 ， 允许文本和内联元素环绕它 。该元素从网页的正常流动(文档流)中移除 ， 尽管仍然保持部分的流动性 。</p></div>

.float{float: left;/*其他样式*/}完整代码可访问 float-layout (codepen.io)[2]
需要注意的是，浮动元素必须放在文本的前面（ html 结构），如果放在文本后面

<div><p>动属性指定一个元素应沿其容器的左侧或右侧放置 ， 允许文本和内联元素环绕它 。该元素从网页的正常流动(文档流)中移除 ， 尽管仍然保持部分的流动性 。</p><strong class="float">浮</strong></div>

那么就会变成这样

文章插图

也就是说，浮动的影响范围是由浮动元素在 HTML 中的结构决定的，这一点非常重要
不过，现在很少会见到这种环绕布局了，但有些时候这种思路还是挺有用的，比如在这篇文章 CSS 实现多行文本“展开收起” (juejin.cn)[3] ，里面就用到了浮动的特性，实现了右下角文本环绕的效果，有兴趣的可以看看

文章插图

二、两栏布局两栏布局的特点是左边是固定尺寸，右边自动撑满剩余空间，例如

文章插图

结构如下

<div class="crad"><img class="head" src=https://www.isolves.com/it/cxkf/yy/CSS2/2021-06-17/"xxx.jpg">浮动属性指定一个元素应沿其容器的左侧或右侧放置 ， 允许文本和内联元素环绕它 。该元素从网页的正常流动(文档流)中移除 ， 尽管仍然保持部分的流动性 。