刚学css，浮动和转换成行内元素这两个好像最后的效果都是在一行中显示，在写的时候两个怎么做大致的选择呢？

根据你描述是如下情况；

浮动脱离文档流；而设置了行内元素又不独占一行，都没有设置宽度，就出现了上述情况。
当你给一方设置宽度，就会挤下去；
相关知识点：
关于css中浮动的理解及实际应用

一、元素浮动的意义及使用：

浮动的意义：设置了浮动属性的元素会脱离普通标准流的控制，移动到其父元素中指定的位置的过程，将块级元素放在一行，浮动会脱离标准流，不占位置，会影响标准流，浮动只有左右浮动，不会出现上下浮动。
浮动的使用：基本语法格式：选择器{float:属性值;}
left 元素向左浮动 right 元素向右浮动 none 元素不浮动

二、元素浮动的特性：

浮动的元素脱离了标准文档流，摆脱块级元素和行内元素的限制
1）这是两个div盒子以及一个span元素在没有设置浮动情况下的样子：

2）这是两个div盒子以及一个span元素在同时设置浮动情况下的样子：

因为行内块元素在一行显示时，他们之间会有小间隔，而有些时候我们并不需要这个间隔，这个时候就用到了浮动

浮动主要用于排版布局，用的较多；
行内元素inline无法设置宽高，行内块状元素inline-block结合了行内和块状元素，既在一行，又可以设置宽高，这两个使用频率看个人情况，有一个便捷的地方是，可以对父级设置text-align来快速的调整对齐方式，用在分页、导航、按钮组合等小功能地方很方便。

较大盒子用浮动【比如页面左中右布局】，li元素一般也用浮动【比如导航菜单】，盒子内部用行内；

浮动虽然和行内元素都是在行内，但是浮动会脱离文档流，想靠左靠左，想靠右靠右，不会被行内元素影响，行内元素会被挤走
而行内元素则是排排坐，一个排一个
一般布局这两个比肯定是优先考虑浮动，因为行内元素调整位置比较麻烦，一般靠margin

但是浮动也不常用了, flex比较流行

如有帮助，麻烦点个[采纳此答案]谢谢^O^

这两个可以都不选，我就只用flex，都能解决。