浮动及弹性盒子

1.浮动介绍

在w3c中有详细的介绍：

https://www.w3school.com.cn/css/css_positioning_floating.asp

2.弹性盒子介绍

可以看我的博客：flex弹性盒子教程
里面有很详细的介绍以及用法

https://blog.csdn.net/weixin_45822171/article/details/114289990

3.什么场景下用浮动及弹性盒子

举例：

用浮动的实现图

用弹性盒子的实现图

在用浮动中，因为文字超出了框框，所以它脱离了文档流往下掉。
在做这种文字撑开的框框，可以用弹性盒子+内边距，把它的上下左右边距设定好，然后它会随着文字的增加而自动撑开。
旧的做法：每行设定死的高度，导致后面撑不开。

4.两者的区别

文档流：浮动元素脱离正常流，让文字环绕。inline-block仍然在正常流中。
水平位置：不能通过给父元素设置text-align:center让浮动元素无法水平居中【因为脱离文档流】，而inline-block可以。
垂直对齐：浮动元素紧贴顶部，inline-block默认基线对齐，可通过vertical-align调整。
空白：浮动忽略空白元素彼此紧靠，inline-block保留空白。

https://www.cnblogs.com/starof/p/4608962.html