浮动与inline-block的区别

display:inline-block 行内块

inline-block 可以将 html 元素设置为行内块元素
行内块元素都拥有以下属性或特点： 1.可设置宽度， 2.可设置高度 3.不自动换行

<div>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

* {
    
    
  margin: 0;
  padding: 0;
}
.box1 {
    
    
  width: 200px;
  height: 200px;
  background-color: #000;
  display: inline-block;
}
.box2 {
    
    
  width: 200px;
  height: 200px;
  background-color: green;
  display: inline-block;
}
.box3 {
    
    
  width: 200px;
  height: 200px;
  background-color: blue;
  display: inline-block;
}

添加 inline-block 前：

添加 inline-block 后：

float浮动

float 属性指定一个盒子（元素）是否应该浮动。
被设置 float:left/right 的元素将会脱离文档流，影响自己还影响周围的元素对齐进行环绕，且该元素变成 block 块级盒子，多元素都设置浮动并不会堆叠在一起，而是会按照顺序排列。

<style > * {
    
    
  margin: 0;
  padding: 0;
}
.box1 {
    
    
  width: 200px;
  height: 200px;
  background-color: #000;
  float: left;
}
.box2 {
    
    
  width: 200px;
  height: 200px;
  background-color: green;
  float: left;
}
.box3 {
    
    
  width: 200px;
  height: 200px;
  background-color: blue;
  float: left;
}

添加 float 浮动前：

添加 float:left 浮动后：

##两者间的区别

1、inline-block盒子间的空隙
对比两者的效果图我们可以发现，同样的 div 布局，使用 inline-block 会产生空隙，空隙是从何而来？其实是由于三个 div 布局时，换行导致产生的空格。

<div>
  <div class="box1"></div><div class="box2"></div><div class="box3"></div>
</div>

将box1,box2,box3一行书写，将不会产生空格。

2、box2中添加文字看看效果
inlin-block的效果：

float的效果：

前者添加文字后发生了下沉，后者并没有。
前者是由于行内块元素的对齐方式默认是vertical-align：baseline，以父元素的底部为对齐才呈现如此效果。

float浮动则是按照盒子浮动顺序排列，并且紧贴在一起

3、给box2设置外边距看看效果
我们给box2设置margin-top:300px让其下移300像素看看两者的区别
行内块：

浮动：

注：红色线框是我给三个盒子的父级设置的边框。

这时我们会发现，使用行内块显示的元素会整体下移。
这是由于浏览器认为他们是同一行级的元素。设置一行中的任意一个外边距，都将会影响整行的位置。

使用浮动的元素会导致父级盒子塌陷，原本是由子元素高度决定的，但是浮动后，导致子元素们脱离了文档流，失去了元素高度，使之父级高度塌陷了。
解决方法：
方法1.给父元素设置height,设置具体的高度。
方法2.给父元素添加overflow:hidden。
方法3.给父元素添加个空标签，设置样式clear:both。或者给父元素添加伪元素box::after{content:'';clear:both;display:block}