浮动元素解析

浮动布局样式

什么是浮动样式？

1、float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块元素或另一个浮动元素的框。
2、语法：
    选择器{float：值}可选值（left：左浮动，right：右浮动，默认none）。

浮动元素的特性：

1、脱离标准流普通流的控制，开启浮动后会移动到指定位置，俗称托标
2、脱离文档流后不会保留原先位置。
3、如果多个盒子都设置了浮动，他们则会在同排显示（在编写代码的时候要遵循一浮全浮的原理）。
4、浮动元素具有行内块元素的特性，高度宽度由内容撑开，设置浮动后可以单独设置宽高。（浮动元素添加浮动后同理）
5、为了图片与块级元素环绕而存在。

---

**注意！**：虽然浮动元素具有行内块元素的特征 但是text 属性跟margin属性的auto值还是无效的，浮动元素经常搭配父级盒子标准流使用。

---

清除浮动

清除浮动元素的本质

1、清除浮动元素的本质是清除浮动元素造成的影响。
2、如果浮动元素有高度则不需要清楚浮动元素。
3、清楚浮动后，父级会根据子盒子自动检测高度，父亲有了高度就不会影响标准流的布局了（俗称高度塌陷）。

清除浮动的方法：

1、给父级添加overf属性（除visible默认属性）。
2、给父级添加工具伪元素
    语法：
  ```
        .clearfix:after{
            content:"";
            display:block;
            height:0;
            claer:both;
            viasbility:hidden;
            }
            .clearfix{
            zoom:1;
            /*适应浏览器*/
            }
  ```
  3、给父级添加双伪元素
    语法：
  ```
        .clearfix:before,clearfix:after{
            conter:"";
            display:block;
            }
         .clearfix:after{
         clear:both;
            }
         .clearfix{
         *zoom:1;
         /*兼容*/
            }

  ```