什么是浮动

浮动初衷是为了实现字围（新闻），后面才发现，浮动可以让多个男标签并排显示。浮动默认的流式布局无法实现元素并排，此时引入浮动的概念。
基本格式：float: left / right / none

浮动的特点

在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排
浮动并没有完全地脱离了标准文档流，如果后面的元素内部有文字，这些文字会环绕在浮动元素的周围，产生字围。
如果多个元素浮动了，那么这们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起。
如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。
如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。
如果元素浮动了，那么它会造成影响：造成父元素高度塌陷。解决:显示加高度（加高法）小偏方（overflow:hidden）
如果元素浮动了，它也会造成对后面的兄弟元素影响。解决：clear:both/left/right
应用：实现左右布局小导航多个规则盒子水平排列（行内块）

    <style>
        .father {
            border: 4px solid black;
            width: 300px;
            margin: 50px auto 0;
            overflow: hidden;
        }
        .son {
            width: 100px;
            height: 100px;
            float: left;
        }
        .son:nth-of-type(1) {
            background-color: red;
        }
        .son:nth-of-type(2) {
            background-color: green;
        }
        .son:nth-of-type(3) {
            background-color: skyblue;
        }
    </style>
    <div class="father">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
    </div>

当一个浮动起来的行内元素，没有设置width，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容，这叫包裹性
如果一个行内元素浮动了，那么就可以设置宽高了，相当于把它变成块级元素。
如果父元素也浮动了，那么就不会出现高度塌陷了。
如果有左浮动，又有右浮动，那么你需要把右浮动的元素写在左左浮动的前
浮动元素会从标准文档流中半脱离出来。证明：字围
一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。

前端孵化日记（二）浮动

什么是浮动

浮动的特点