学习前端的第二周之浮动

浮动（float）

1丶浮动的特点

被添加浮动的元素会脱离正常文档流，紧贴着父级元素的左边框或右边框，如果在同一父级元素下同时有多个浮动元素，那么将会紧贴该元素的上个元素，或者父级元素。如果父级元素宽度足够，浮动元素不会换行，换行只是因为父级元素不够大，装不下该浮动元素，如果给父级元素加宽度，浮动元素还会回到一行。（浮动最初的目的是为了实现文字环绕效果）

2丶浮动的流水排列

写5个高度不同的div，加左浮动，然后

<style>
        * {
            margin: 0;
            padding: 0;
        }
       
        
        div {
            float: left;
        }

        .div1 {
            width: 100px;
            height: 200px;
            background: orange;
        }
        
        .div2 {
            width: 200px;
            height: 150px;
            background: green;
        }
        
        .div3 {
            width: 300px;
            height: 120px;
            background: blue;
        }
        
        .div4 {
            width: 400px;
            height: 200px;
            background: pink;
        }
        
        .div5 {
            width: 300px;
            height: 200px;
            background: red;
        }
    </style>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <div class="div4">div4</div>
    <div class="div5">div5</div>

这是正常浮动的5个div。而当慢慢减小屏幕尺寸时，
因为父级元素的宽度不够，div5就被迫换行，到了第二行。接着缩小屏幕尺寸，
可能有的人会以为，div4也会div5一样，也单独换行，替代div5的位置，将第div5再挤下去一行，但是事实却不是这样的，div4换行到了div3的下面，这就是浮动的流水排列。
**浮动的流水排列是指， 当几个在同一个父级元素下的浮动的元素的高度不一样时，如果父级元素宽度不够装下浮动元素，那么浮动元素就会向下换行，会像水流一样，优先换行到能装下它的位置。**比如div4就优先换行到能装下它的div3下面。可能有的人不懂为什么div5没有到div3下面，是因为div5是始终在排列div4后面的。
如果我将div5的宽度减小到div3下能装下的宽度.他还是不会排列在div3下面
再减小屏幕宽度。
这就是浮动的流水排列。再看div3，那么他就会换行到下一个能装下它的地方，也就是div2的下面，就像下图：

浮动的流水排列有的时候在浮动中会发生，但是只要浮动的高度一样，就可以避免。

3丶清除浮动

清除浮动主要是为了解决，父元素因为子级元素浮动引起的高度塌陷（父元素高度为0）的问题。
1丶overflow:hidden,但是对类似下拉菜单这样不友好
2丶BFC（Block Formating Context，即块状格式化上下文）
（1）在浮动元素后面添加空白块级元素，为其设置clear:both
（2）在父级伪元素添加clear:both（推荐使用）

.father::after{
            content: "";
            display:block;
            height: 0;
            visibility: hidden;
            clear: both;