接上篇内容，上篇内容大致总结了css的一些布局技巧。包括flex弹性盒子,grid布局,float浮动。但是目前可能float在实际场景中用到的较少，flex弹性盒子的场景居多一点。本篇内容是实战篇，会提供以上三种布局技巧的例子。好了，废话不多说。
float浮动-实现文字环绕的效果
这个案例我们需要实现这样一个效果。（由于是案例，所以请忽略是否美观这个问题）
那么看到这个场景我们首先需要想到这个是由一个盒子和两段文字构成的。
那么我们写一下这个html骨架代码。
但是这仅仅只是一个骨架因为它实现的效果是这样的。
那这是为什么呢？我们思考一下因为div是块级元素，独占一行。
- 我们还学过display属性可以转换块级和行级，那么试试display:inline;哦，那就错了！行级盒子设置宽高不生效，那么我们的div就没有这么大了，它只靠内容撑开。
- 那如果试试display:inline-block;oh-no，还是不可以，但是实现了div的大小。
- 这里提供一种方法-用float:left;实现这种效果。
ok,那我们总结一下。要想实现文字环绕这种效果||div靠左||div靠右,我们都可以使用float,根据不同的场景设置不同的属性值。
flex弹性盒子
简单回顾一下上篇文章中提到的flex可以干什么？
- 设置相同元素的排列布局
我们现在想要实现这种效果怎么实现呢？
- OK，可以给左右两个盒子设置display:inline-block。
- 那么用flex呢？
- 给这两个盒子的父级元素设置display:flex; 记住这里一定是给父级元素！！！
- 我们看看flex还有什么效果吧
-
-
-
-
仔细看会发现这两个盒子之间的距离不一样。是因为justity-content的属性值不同而导致的。那么具体设置什么属性值，可以根据实际情况而定。justify-content:space-between;为图1.justify-content:space-evenly;为图2.justify-content:space-around;为图3.当然大家并不需要记住这么多。用到的时候可以去查查学习文档。
-
gird布局
要说flex和grid有什么区别，大概就是flex只能实现一维方向的灵活布局，而grid可以实现二维方向的灵活布局。
可以设置从第几条横线和第几条竖线开始。同时可以设置不同的背景色。
