其实文章原标题是《遇到不支持flex的项目怎么办？》现在几乎是flex的天下，简单灵活，但是有时候接触IE浏览器是不可避免的，比如我最近接触了中国读书作家专区（qq.com），需要兼容用IE9，自然不能用flex布局。不会用flex怎么办（这个项目好XX，2021年还兼容IE）？那只能回到传统的布局方式，即浮动布局。Floating浮动可以说是CSS布局中最灵活的布局之一。不要小看浮动，有些布局只能通过浮动来实现。下面将介绍几种常见的布局，一起来看看1.文字环绕布局这种布局应该是浮动的初衷。例如，设置一个左浮动就足够了，实现如下
float">float
float属性指定一个元素应该沿着它的容器的左侧或右侧定位，允许文本和内联元素环绕它。此元素已从网页的正常流（文档流）中删除，但仍保留部分流。
.float{float:left;/*其他样式*/}完整代码可以访问float-layout(codepen.io)需要注意的是，浮动元素一定要放在文字前面（HTML结构），如果放在文字后面
dynamic属性指定一个元素应该沿着它的容器的左侧或右侧放置，允许文本和内联元素环绕它。这个元素从网页的正常流（文档流）中移除，但仍然保留部分流量。
float那么就会变成这样，也就是说float的影响范围是由float元素的结构决定的HTML，这是非常重要的，然而，这种环绕式布局现在已经很少见了，但有时候这种思路还是挺有用的，比如这篇文章中CSS实现多行文本“展开和折叠”（juejin.cn），就是利用浮动特性实现了文字在右下角换行的效果。如果你有兴趣，你可以看看第二个和双列布局。两列布局的特点是左边是固定大小，右边自动填满剩余空间。例如结构如下
float属性指定一个元素应该沿其容器的左侧或右侧，允许文本和内联元素将其包裹起来。此元素已从网页的正常流（文档流）中删除，但仍保留部分流。 浮动实现如下，主要是文字需要设置overflow:hidden。这里不讲实现原理（BFC）。有兴趣的可以查看这篇CSS了解BFC特性下的流体特性和多列自适应布局。head{float:left;}.info{overflow:hidden;}如果右边是固定大小，遇到这种情况怎么办？很多人可能会想到右浮动，是的，但是需要注意的是HTML结构不需要改变，即浮动元素仍然在文本的前面。head{float:right;}值得注意的是，如果需要设置两列的间距margin，需要在浮动元素上设置。头{浮动：左；margin-right:8px;}完整代码可以访问float-2-cols三三列布局三列布局的特点是左右都是固定大小，自动支持中间填充剩余空间，对于例如，结构如下
