关于float:left及display:inline(display:inline-block)的不同及应用场景

问题

CSS中用float:left和display:inline(display:inline-block)设置元素水平排列有什么不同？

答案

float:left会使元素脱离文档流（通俗讲就是元素不占据原来的空间，后面的元素会当做它不存在一样占据他的位置。类似于绝对定位的效果）因此所有子元素设置浮动float后父级元素会被闭合（也就是父元素里没有内容不占据空间，宽高置为0，不过可以通过清除浮动解决）。
float:left设置高度不一致的元素水平排列且需要换行排列时会排列的很奇怪。而使用display:inline或者display:inline-block则不会发生上面的问题。当然，float:left用在需要文字环绕时的效果时很有用。

总结：
大多数时候
水平排列时用 display:inline(display:inline-block)
文字环绕效果时用浮动float
ps：不绝对，还是取决于自己，那个好用用哪个！！！

题外：

这里提一下display:inline和display:inline-block的区别？

display:inline通过将块级元素设置为内联元素来达到水平排列的目的
display:inline-block则是在达到水平排列目的同时又设置为块级元素

PS：内联元素的盒子宽高靠内容撑开，不能设置元素的宽高等，块级元素则可以任意设置大小。

实践

原始：设置父级div宽为定值250px，设置5个子级div宽和高为定值颜色各不同。（绿，蓝，红，黄，黑）

<style>
.father {
    width: 100px;
    background-color: pink;
}
.greenson {
    width: 15px;
    height: 15px;
    background-color: rgb(0, 255, 13);
}
.blueson {
    width: 30px;
    height: 30px;
    background-color: rgb(38, 0, 255);
}
.redson {
    width: 30px;
    height: 15px;
    background-color: rgb(255, 0, 43);
}
.yellowson {
    width: 30px;
    height: 45px;
    background-color: rgb(251, 255, 0);
}
.blackson {
    width: 45px;
    height: 30px;
    background-color: rgb(0, 0, 0);
}
</style>

改变1：为所有子元素设置浮动float:left

设置浮动
可以看到父元素的背景消失了，也就是上面所说的父元素没有内容不占据空间所以闭合了。
因此在父元素里添加一个子元素div在最后清除浮动

<div class="father">
        <div class="greenson"></div>
        <div class="blueson"></div>
        <div class="redson"></div>
        <div class="yellowson"></div>
        <div class="blackson"></div>
        <div style="clear:both;"></div>   //添加清除浮动
    </div>

清除浮动

改变2：在使用浮动时减少父级div宽为100px

改变2
当把父容器的宽度减小到第一行容纳不下这么多子元素时，剩余的子元素就会自动到下一行，但是却会排在第一行高度最高的元素之后。

改变3：改变所有的子元素为display:inline-block，父元素宽度恢复为250px

（ps：为什么不设置为display:inline？因为子元素div里我只设置了宽和高和背景颜色，元素里没有内容，所以直接设置inline的话我设置的元素宽高就不起作用，而里面也没有内容就相当于一个空的div 。）
改变3
可以看到也水平排列了（不过跟设置浮动的水平排列有所不同，是以底部对齐的排列！！！）
PS：设置inline或inline-block后元素间会有间距，原因是代码之间的空格让元素间出现了这样的情况！具体我之前的博客有讲过解决办法这里就不赘述了

改变4：在使用inline-block时减少父级div宽为100px

在这里插入图片描述
可以看到依次顺序排列了。

改变5：为所有子元素同时添加inline-block和float

改变5
呃，只有浮动的效果。（好吧只是好奇做个试验）
应该是覆盖了display的效果，所以用完浮动记得最后要清除一下浮动哟~

此篇博供自己日后复习所用有错误记得指出哟~