清除浮动

浮动是css里面布局最多的一个属性，也是很重要的一个属性。

1. float：表示浮动的意思。它有四个值。

• none: 表示不浮动，默认
• left: 表示左浮动
• right：表示右浮动

　　看一个例子

　　　　html结构：

 <div class="box1"></div>
 <div class="box2"></div>
 <span>路飞学城</span>
css样式
.box1{
     width: 300px;
     height: 300px;
     background-color: red;
     float:left;
  }
 .box2{
     width: 400px;
     height: 400px;
     background-color: green;
     float:right;
   }
   span{
     float: left;
     width: 100px;
     height: 200px;
     background-color: yellow;
    }

　　咱们会发现，三个元素并排显示，.box1和span由于是左浮动，紧挨在一块儿，这种现象贴边。.box2盒子由于右浮动，因此紧靠着右边。

　　那么浮动若是你们想学好，必定要知道它的四大特性

　　　　　　　　1.浮动的元素脱标

　　　　　　　　2.浮动的元素互相贴靠

　　　　　　　　3.浮动的元素由"子围"效果

　　　　　　　　4.收缩的效果

浮动元素脱标

<div class="box1">小红</div>
     <div class="box2">小黄</div>
     <span>小马哥</span>
     <span>小马哥</span>

        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        
        }
        span{
            background-color: green;
            float: left;
            width: 300px;
            height: 50px;
        }

　　效果：红色盒子压盖住了黄色的盒子，一个行内的span标签居然可以设置宽高了。

　　缘由1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。因此就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议你们这样叫。

　　缘由2：全部的标签一旦设置浮动，就可以并排，而且都不区分行内、块状元素，都可以设置宽高

浮动元素互相贴靠

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    .box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 150px;       
            height: 450px;
            float: left;
            background-color: yellow;
        }
        .box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }

浮动元素字围效果:

浮动元素紧凑效果

　　收缩：一个浮动元素。若是没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

你们必定要谨记：关于浮动，咱们初期必定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一块儿浮动。另外，有浮动，必定要清除浮动，

2. 为何要清除浮动

　　还好还好。咱们有多种清除浮动的方法，在这里给你们介绍四种：

1. 1. 给父盒子设置高度
   2. clear:both
   3. 伪元素清除法
   4. overflow：hidden

　　给父盒子设置高度:

　　　　这个方法给你们上个代码介绍，它的使用不灵活，通常会经常使用页面中固定高度的，而且子元素并排显示的布局。好比：导航栏

　　伪元素清除法:

　　　　给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，而后设置

.clearfix:after{ 
/*必需要写这三句话*/
 content: '.';
 clear: both; 
display: block; }

　　　　新浪首页推荐伪元素清除法的写法

/*新浪首页清除浮动伪元素方法*/ 
content: ".";
 display: block;
 height: 0; clear: both;
 visibility: hidden

 bfc:          http://www.javashuo.com/article/p-ezyacvwn-v.html