浮动布局的理解浮动布局：脱离了传统的文档流，但又未完全脱离，浮动的目的就是为了让块级元素可以并排显示。在一个父元素内部

浮动布局：脱离了传统的文档流，但又未完全脱离，浮动的目的就是为了让块级元素可以并排显示。
格式：float:left/right/none,none 默认不浮动

浮动的特点及影响

在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就会往上排。例如:

<div class="item">
        <div class="item1">
        </div>
        <div class="item2">
        </div>
        <div class="item3">
        </div>
    </div>

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .item {
            height: 210px;
            width: 200px;
            border: 5px solid yellowgreen;
        }
        .item1 {
            height: 75px;
            width: 75px;
            background-color: red;
        }
        .item2 {
            height: 70px;
            width: 70px;
            background-color: green;
        }
        .item3 {
            height: 60px;
            width: 60px;
            background-color: blue;
        }
    </style>

此时代码显示为标准文档流布局：从上往下依次排列：

当我们给item2加上float:right;时，就会为

2. 浮动并没有完全地脱离了标准文档流（破坏性--->flex），如果后面的元素内部有文字，这些文字会环绕在浮动元素的周伟，产生字围。
3. 如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。
当我们给item1加上float:right;时，就会为

如果多个元素浮动了，那么这们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起。
4. 当一个浮动起来的块级元素，没有设置width，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容，这叫包裹性。
代码

    <style>
        div{
            border: 1px solid red;
        }
    </style>

</head>
<body>
    <div>这是一个盒子</div>
</body>

没有设置浮动之前为：

设置浮动之后为：

5. 如果一个行内元素浮动了，它会悄悄地做一个变性手术，变成块级元素。那么就可以设置宽高了。

清除浮动

当我们没给最外面的父元素item设置高度时，它的高度是靠里面的元素撑起来的，如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。例如：当我们给里面的item1和item2都往右浮动起来的话，item2：float:right;,item3：float:right;,，就会造成：可以看到绿蓝盒子跑到外面去了。
那么如何来解决高度塌陷呢？
第一种：加高法，即给外面的盒子item一个高度，来包裹这三个盒子；
第二种：利用overflow:hidden即可；给父元素加上overflow:hidden；

 .item {
            width: 250px;
            border: 1px solid yellowgreen;
            overflow: hidden;
        }

第三种：clear:both 在所有子元素后面加一个空的div 在这个div上面加clear:both ---> 内qiang法，优点：clear:both专业清除浮动的,缺点：多写一个代码;

 * {
           margin: 0;
           padding: 0;
       }
       .item {
           width: 250px;
           border: 1px solid yellowgreen;
       }
       .item1 {
           height: 75px;
           width: 75px;
           background-color: red;
           float: left;
       }
       .item2 {
           height: 70px;
           width: 70px;
           background-color: green;
           float: left;
       }
       .item3 {
           height: 60px;
           width: 60px;
           background-color: blue;
           float: left;
       }
   </style>

<div class="item">
        <div class="item1">
        </div>
        <div class="item2">
        </div>
        <div class="item3">
        </div>
    </div>

会出现父元素的塌陷：

当加上<div style="clear: both;"></div>后，

第四种：项目中最常用清除浮动的方法：利用伪元素after，说白了，就是写一个清除浮动的类，如下：.clear:after{content=""; display:block; clear:both; height:0; overflow:hidden;},即:

.item3 {
            height: 60px;
            width: 60px;
            background-color: blue;
            float: left;
        }
        .item::after{
            content:""; 
            display:block; 
            clear:both; 
            height:0; 
            overflow:hidden;
        }