随着css的发展，在加上各种优秀ui库的兴起。我们在项目中浮动用的很少。但并不意味着我们不使用浮动了。曾几何时，浮动这个属性是那个遥远时代的"超级明星"排版，布局，都需要使用他。今不如昔：现在没落了。他的这几个属性还记得吗？1.包裹性2.浮动的自适应性3.float会改变display的值，不是block就是table4.浮动导致的父元素高度坍塌5.没有任何margin合并6.会破坏文档流

包裹性就是说：假设父级元素500px;浮动的子集元素是200px;则表现的是200px。这就是包裹性。我理解的包裹性指的是：浮动元素的宽度会收缩到与内容一致。高度由内容决定。浮动会使盒子产生包裹性

/* 父级元素500px */.father-box {  width: 500px;  background: pink;}/* 浮动的子集元素 */.float-son {  float: left;}.float img {  width: 200px;}

浮动的自适应性:如果子元素不仅有图片。还有文字，则原来图片是多大就是多大。

  
     我就喜欢看雪月剑仙李寒衣  

元素一旦float的属性值不是none，则 display 的值不是block就是table。很多小伙伴看见上面这一句话，就以为我是胡说八道。我们可以通过下面的例子来看下

.father-box {  width: 500px;  background: pink;}.float-son {  float: left;}.float img {    width: 200px;    height: 200px;}  
    
    
  
  <script>    let dom = document.querySelector(".float-son")    console.log("是bolck吗？", window.getComputedStyle(dom).display)  </script>

看见上面这个例子是不是有点不可思议。元素设置为浮动后，这个元素的 display 竟然是 block。有些小伙伴会说：你傻呀？div本来就是块级元素，所以display就是block。是吗？那我们来看下面的例子。

.father-box {  width: 500px;  background: pink;}.float-son {  float: left;}.float img {    width: 200px;    height: 200px;}  
          我是span标签，设置了float      
  <script>    let dom = document.querySelector(".float-son")    console.log("是bolck吗？", window.getComputedStyle(dom).display)  </script>

看了这个例子是不是觉得发现了新知识。一个本来是行级元素。怎么它的display是block。是的，你没有看错。元素一旦float的属性值不是none，则 display 的值不是block就是table。

    我是span标签，设置了float.float-son {  float: left;  /**这个block没有意义，不用写 */  display: block; }

当浮动后； display: inline-table时，display的属性值才是table；其他属性值，全是block。我们可以通过下面的代码来验证一下。

  
            我是span标签，设置了float      
  <script>      let dom = document.querySelector(".float-son")      console.log("是table吗？", window.getComputedStyle(dom).display)  </script>

我们都知道，浮动属性由一个非常著名的表现特征。就是会让父元素的高度坍塌。浮动导致的父元素高度坍塌我的理解就是：子元素设置浮动后脱离文档流，从而导致子元素无法撑父元素的高度，就会造成父元素的高度塌陷。

  我是父级元素  
    下面这样的情况就会导致父元素高度坍塌  

我们都知道 clear 有4个属性值，分别是:clear：none | left | right | both之前看见有一篇文章有一个大佬是这样说的：凡是可以使用 clear:left 或者 clear:right起作用的，就一定可以可以使用 clear：both去替换。我觉得不一定。我们来看下面的例子

.left {  background: rgba(44, 230, 7, 0.904);  height: 300px;  float: left;}.center1 {  background: rgb(10, 197, 239);  height: 300px;  float: left;}.center2 {  background: rgb(224, 9, 167);  height: 300px;  /* 这里我使用了右侧清除浮动 */  clear: right;}.right {  background: pink;  height: 300px;  float: left;}

  
    
我是左侧的内容
    
center1center1center1
    
center2center2center2
    
我是右侧的内容
  

其他的不变，按照大佬的说法：可以使用 clear: right;就可以使用 clear：both去替换。我就修改一下，如下：

.center2 {  background: rgb(224, 9, 167);  height: 300px;  /* 这里我使用了右侧清除浮动 */  clear: both;}

如果你觉得，这篇文章写的不错，对你有用。请给我点一个赞，感谢了。