1. float布局是什么？

float , 浮动，是页面布局的方式之一。很早以前的话，浮动是用来实现一种文字环绕图片的效果。

举例：例子：一个div，里有一个图片和一大串文字

    <div>
    <img src="xxx">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, minus magnam accusamus eum laborum ducimus possimus beatae fugit illum molestias odit et asperiores adipisci sunt dolorem qui autem enim excepturi alias ab unde temporibus. Sapiente labore a magnam commodi itaque architecto quos doloribus voluptates perferendis rem, earum consectetur. Tempora inventore ducimus veritatis voluptatem deleniti rem laboriosam. Officiis, impedit explicabo! Impedit labore ea et vero rerum nihil in cum qui, itaque blanditiis eius nemo est? Tempora explicabo voluptates consectetur officia aperiam eos impedit veritatis necessitatibus quidem deleniti ea, in odit cum ex harum voluptas, quos eveniet quae voluptate aspernatur quod! Nostrum?
    </div>

图片没开浮动的话，就会有空白。开了浮动，文字就会环绕图片

    img {
        width: 200px;
        float: left;   /*开启浮动，向左浮动 */
    }

2. 开启浮动的元素有什么特点？

1.浮动的元素会脱离文档流。

2.不管元素浮动前是什么块元素还是行内元素或者是什么元素，浮动后，默认宽与高都是被内容撑开（一般会小），而且可以设置宽高。

3.浮动的元素，不会独占一行，可以与其他元素共用一行。

4.浮动的元素 margin 不会合并，也不会 margin 塌陷，可设置四个方向的 margin 和 padding 。

5.不会像行内块一样被当做文本处理（没有行内块的空白问题）。

（文档流是什么？）

文档流 指的是：元素默认的排列方式。也就是贴着块。例如body标签里的写一个div标签、这个div标签就贴着这个body标签。
脱离文档流：这个元素不是默认的排序方式了，例如浮动的话，浮动的元素A会飘起来，A后面的元素B会占据A元素之前的位置，同时B元素的内容会有所调整。

盒子2 浮动前：

浮动后：

3. 浮动产生的影响与解决

3.1当前元素浮动产生的影响：

对兄弟元素的影响：它后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。

对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷（如果父元素没指定高度）；但父元素的宽度依然束缚浮动的元素。

3.2 如何解决影响？

方案一：给父元素指定高度。
方案二：给父元素也设置浮动，带来其他影响。
方案三：给父元素设置 overflow:hidden（开启BFC）。
方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。（推荐使用）

/*方案五*/
.parent::after { 
    content: "";
    display: block; 
    clear:both; 
    }

4，使用float布局的例子有？

圣杯布局与双飞翼布局

<!--圣杯布局-->
<head>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }

        #container {
            padding-left: 200px;
            padding-right: 150px;
        }
        #container .column {
            float: left;  // left、center、right都浮动了，满足圣杯的其中一个条件
        }

        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            background-color: yellow;
            position: relative; /*这里*/
            right: 200px;  /*这里 left往左跑200px，因为之前设置container的 padding-left: 200px;*/
            width: 200px; /*container的 padding-left: 200px;*/
            margin-left: -100%;  /*这里 left块 往左拖拽 */
        }
        #right {
            background-color: red;
            width: 150px;  /*container的 padding-right: 150px; */
            margin-right: -150px;  /*这里可以看做是外界认为它的宽度减少了150px，在外界看来它没有宽度了，没有宽度就不占地方了不用浮动下来*/
        }

        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }

        /* 手写 clearfix */
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>

圣杯布局效果图

双飞翼布局

<!--双飞翼布局-->
<head>
    <style type="text/css">
        body { min-width: 550px; }
        .col {
            float: left;  //3个块都设置浮动
        }

        #main {
            width: 100%;   /*要注意*/
            height: 200px;   /*3个块等高*/
            background-color: #ccc;
        }
        #main-wrap {
            margin: 0 190px 0 190px; //双飞翼布局使用margin为两边留白
        }

        #left {
            background-color: #0000FF;
            height: 200px;
            width: 190px;
            margin-left: -100%;  //left块和圣杯布局一样的-100%
        }
        #right {
            background-color: #FF0000;
            height: 200px;
            width: 190px;
            margin-left: -190px;  //设置和宽度一样的负值，挤上去，用的还是margin-left
        }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id="main-wrap"> this is main </div>
    </div>
    <div id="left" class="col"> this is left </div>
    <div id="right" class="col">  this is right  </div>
</body>

双飞翼布局效果图

CSS布局-浮动float