display:inline-block与float的在css样式中效果的区别

2018.1.31是一个不同寻常的日子，今天是我第一次进入csdn的日子，也是我第一次在网上发布自己的文章的日子。我自己是一个小白，刚学习前端半年时间，这段时间是自己学习最为艰辛的一段日子。看到别人发的博客，就想把自己每天的所学所想也用另外一种形式记录下来，便有了我的第一个csdn博客——小乔与你同在。接下来以后我会把自己感觉好的地方，或者生活中的感悟分享出来，与大家共同学习，共同生活。希望我们不仅只会埋头敲代码，更要会学会享受快乐。
浮动是一个让元素拥有块级元素的特性但却可以在一排显示的属性，无论该元素是否是块级元素还是行内元素，与display:inline-block;的作用非常一致，但是也有很多不同点。其实这两者区别在使用方面影响不大，但是知道这些可以让我们更好地理解float与display:inline-block;之间的区别。

1. 文档流相关

float会脱离文档流，浮动后的元素会脱离普通文档流，也不再按照常规的排列方式排列，其他元素会忽略其存在然后进行排列，其主要特性为：
1.1 提高层级，不会再占据当前的位置
1.2. 可以设置宽高但宽高默认由内容撑开
1.3 margin:auto;失效，
display:inline-block可以将行级元素或块级元素转化为行快级元素，仍然属于普通文档流，界面中的元素按正常的特性（块级特性、行内特性、行块特性等）从上到下加载排列，占据正常的位置。

2.对文本样式设置效果不同

在实践中发现，float并不支持text-align:center;文本样式的设置,而display可以实现子级元素文本和文字的居中效果
float由于自己的排列规则，会优先考虑文本对其方式的影响（默认左对齐显示），文本不会居中显示。
disply:Inline-block;将行内元素转为行块级元素，不影响文本的排列规则，其texe-align设置文本依旧生效。
注意，这里的影响指的是文本水平方向的子级元素区域显示的效果，对于文字在子级元素内仍然是居中显示。
学这个地方的时候，当初问了好几个老师才理解两个在某些方面的不同之处，如果有什么错误，希望各位朋友能够及时给与纠正，在这里小乔谢谢你们每位的指导，提前祝大家新年快乐，集福中大奖。