float 浮动

  <style>

        .main{
            border: 5px solid #000;
        }

        .box1{
            width: 400px;
            height: 300px;
            background: #128fc2;
            font: 50px/300px '微软雅黑';
            text-align: center;
            color: #fff;
            float: left;
        }
        .box2{
            width: 400px;
            height: 300px;
            background: #128fc2;
            font: 50px/300px '微软雅黑';
            text-align: center;
            color: #fff;
            float: right;
        }
    </style>

　　<div class="main">

  　　 　　 <div class="box1">1</div>

   　　 <div class="box2">2</div>

　　</div>

  让元素按照指定的方向发生位移，直到碰到相邻的浮动元素或者父级的边界的时候才会停下来

        浮动元素：给一个元素加了浮动之后，这个元素就可以叫做浮动元素了

        浮动元素会脱离文档流，不会撑开父级的高度

   

　　　　

1. 清浮动

    <style>
        .main {
            border: 5px solid #000;
            overflow: hidden;
        }
        
        .box1 {
            width: 400px;
            height: 300px;
            background: #128fc2;
            font: 50px/300px '微软雅黑';
            text-align: center;
            color: #fff;
            float: left;
        }
        
        .box2 {
            width: 400px;
            height: 300px;
            background: #128fc2;
            font: 50px/300px '微软雅黑';
            text-align: center;
            color: #fff;
            float: right;
            /*clear: left;!* 左边不能有浮动元素 *!*/
        }
    </style>

 　　<div class="main">

        <span class="box1">1</span>

        <div class="box2">2</div>

        <br clear="both">

    </div>

 清浮动：清除浮动造成的影响


        1，直接给父级加高度
        2, <br clear="both">  一定要加在父级的最下面
        3, 给父级加浮动
        4, overflow:hidden;





    浮动特性：
        1，可以让块元素排成一行 （并且中间没有空格）
        2，可以让内联元素支持宽高
        3，没有加宽度的时候，宽度默认由内容撑开
        4，不会撑开父级的宽度

（1）如果可以使用固定高度，可以直接给父级添加固定高度

（2）利用<br/>达到清除浮动的效果

<br/>换行标签，会在当前位置另起一行，如果希望在当然已有内容的下一行进行         输出，可以添加一个属性 clear（可选值：left、right、all）

<br clear="all"/>

（3）使用clear属性清除浮动

clear的写法

A. clear: left;

B. clear: right;

C. clear: both;

D. clear: none;

clear的特性

- 只会对写在它前面的浮动元素起效，后面的清除不了

- 清除指定方向的浮动

- 只有添加给块标签才是有效的，并且是具有独占一行效果的块（加了浮动的不行哟）

（4）利用伪元素清除浮动

 <style>
        .box{
            border: 5px solid #9a6e3a;
            /*display: inline-block;*/
        }

        .item{
            width: 400px;
            height: 300px;
            background: #f9ce2e;
            float: left;
        }

        .fix{
            *zoom:1;/* 触发haslayout(IE里面的BFC)*/
        }
        .fix:after{
            content: '';
            display: block;
            /*display: table; 为了兼容低版本浏览器*/
            clear: both;
        }
    </style>

<div class="box fix">
    <div class="item"></div>
</div>




<div class="main fix">
    <div class="item"></div>
</div>




<div class="first fix">
    <div class="item"></div>
</div>




<!--
 

clear 清浮动，只能在块元素身上才有左右

Δ after给当前父级添加一个，处于最后位置的子元素（clear只对前面的元素有效）

Δ content 添加内容

Δ display:block 只有添加给块标签有效

Δ clear:both 同时清除左右方向的浮动

注：上述任何一项都不可以丢！！

 

（5）父级触发BFC