CSS之浮动（float）

这是我参与更文挑战的第21天，活动详情查看：更文挑战

一、浮动的概念

浮动其实就像是我们在一片海当中，不是海内的固定的珊瑚之类的生物，而是漂浮着的。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 也就是说浮动是脱离文档流的。

二、float的属性

    float: left;  // 表示元素浮动在块容器的左侧。
    float: right; // 表示元素浮动在块容器的右侧。
    float: none;  // 默认值，不浮动。

可以看到，当浮动向左的时候，最上面的浅色盒子由于脱离了文档流，所以被下面的紫色盒子覆盖了。当浮动向右的时候，可以看到浅色盒子偏向右边。

三、浮动的本质

浮动的包裹性：其实不知道大家有没有用过word里面的图片当中的文字环绕，就有点类似这个。也就是在CSS当中， 文字会环绕含浮动属性的图片。

当我们正常使用图片+文字的时候：

  <div id="child1">
    我是一个图片<img src="./flower.png" /> 图片是花
  </div>

    #child2 {
        width: 50px;
        height: 50px;
        background-color: firebrick;
    }

当我们给图片加上浮动属性的时候，

     img {
        float: left;
     }

可以看到图片好像脱离了出来。也就是浮动元素脱离了出来。

四、浮动的常见应用 -- 高度塌陷问题

我们在使用浮动的时候很容易造成高度塌陷，如图：

    <div id="parent">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>

    #parent {
        border: 1px solid;
    }
    #child1 {
        width: 50px;
        height: 50px;
        float: left;
        background-color: aquamarine;
    }
    #child2 {
        width: 50px;
        height: 50px;
        float: left;
        background-color: firebrick;
    }

我们也提到过解决高度塌陷，可以通过BFC,比如设置overflow属性:

    #parent {
        border: 1px solid;
        overflow: hidden;
    }

效果👇

或者使用清除浮动：

    #parent {
        border: 1px solid;
        display:block; 
        content:'clear';
        clear:both;
    }

关于BFC的具体可以看我之前的文章：《BFC到底是什么？》

总结

总结一波，其实浮动一直是我不怎么喜欢的东西，因为它脱离了文档流，很容易让我的页面“翻车”，但是就算我不喜欢他，我也不会甘于让他“控制”我。所以还是要多了解关于浮动的知识，才能更好的实现页面。

如有错误，欢迎批评指正~~

参考文章：MDN文档