![screenshot](https://oss-cn-hangzhou.aliyun
cs.com/yqfiles/7cd0e64f9253584ce19763886ad8b89ca81b6ed6.png)
为什么使用inline-block,内容就和float元素不在一行了,而block却好好的.
一个元素如果设置了float属性,那么其后续元素将会放在后位置显示,而不管这个元素是块级元素还是inline元素
2)设置display属性并不能改变元素的原有类型,inline还是inline,块级的还是块级的
3)display:inline-block,元素会接在inline元素后面像块级元素一样显示-不会发生折行,但和inline元素的区别在于当其包含块-也就是其父元素容器的宽度不能够显示其全部内容时-一行显示不全是,会把整块元素的向下移动一直到float元素的下方
4)而对于dispaly:block元素在float元素的边上就老老实实待着,宽度不高就折行显示增加块的高度
你的代码之所以会有所示的效果,就是一个宽度的问题,你把父元素设足够块,就可以看到所述的效果
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。