浮动的理解及实际应用

1.CSS布局的三种机制：

网页布局的核心，是用CSS来摆放盒子。

CSS有三种传统布局方式：普通流、浮动和定位。

普通流：也叫标准流或文档流。普通流的标签按照规定的默认方式排列，块级元素独占一行从上往下排；行内元素从左到右排，排到父元素的边缘时自动换行。

浮动：可以改变元素的默认排列方式，让盒子从普通流中浮起来。主要是让多个块级元素横向在一行上排列。

定位：将盒子定在浏览器窗口的某个位置。

2.为什么需要浮动？

在实际布局中，如果遇到以下问题：

如何让块级盒子在一行上水平排列？

如何让块级盒子实现左右对齐？

 显然，标准流的布局方式无法实现。标准流不能满足我们的需求，所以需要用浮动来解决这种网页布局的问题。

3.什么是浮动？

浮动是指给元素设置了浮动属性后会脱离标准流的控制，让元素移动到指定的位置。

4.浮动的作用：

让块级盒子在一行上水平排列显示。

可以实现盒子的左右对齐。

浮动还可以控制图片，实现文字环绕图片的效果。

5.语法：  

选择器 {float: 属性值;}

float的属性值有三个：默认none，元素不浮动；left设置为左浮动；right设置为右浮动。

6.特点：

①设置了浮动的元素会浮在普通流的上面，不占据位置，脱离标准流，简称“脱标”。

<div class="one">1</div>
<div class="two">2</div>

    .one {
      width: 100px;
      height: 100px;
      background-color: pink;
      float: left;
    }

    .two {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

 盒子1设置了浮动，就会浮在普通流的盒子2上面，浮动的盒子1不再占有位置。

②浮动的元素互相紧贴在一起，当父盒子装不下浮动的子盒子时，多出来的子盒子就会另起一行排列。

  <div class="father">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div class="four">4</div>
  </div>

<style>
    .father {
      width: 450px;
      height: 450px;
      background-color: blanchedalmond;
    }
    .one,
    .two,
    .three,
    .four {
      width: 140px;
      height: 140px;
      float: left;
    }
    .one {
      background-color: pink;
    }
    .two {
      background-color: skyblue;
    }
    .three {
      background-color: greenyellow;
    }
    .four {
      background-color: orange;
    }
  </style>

盒子1，2，3，4都有浮动，他们会紧挨在一起水平排列。父盒子的宽度不够放第4个盒子了，盒子4就另起一行去排列。

 如果给子盒子设置了display：inline-block，也可以让子盒子在一行上水平排列，但是这样做，盒子之间会存在间隙。不会像浮动一样盒子之间紧挨在一起。

③浮动只会影响当前或后面标准流的元素，并不会影响到浮动之前标准流的元素。

7.清除浮动：

7.1为什么要清除浮动？

有一种情况就是父盒子里面子元素很多，父盒子的高度不好给，想让子元素的内容把父盒子的高度撑起来。但是子元素设置了浮动，就会脱离标准流，并不会撑起父元素的高度，是父元素的高度为0。

7.2清除浮动的本质：

就是解决父元素因为子元素浮动而引起的父元素高度为0的问题。清楚浮动后，父元素会自动根据浮动的子元素检测高度。父盒子有了高度，就不会影响到后面标准流的元素。

7.3清除浮动的方式：

①额外标签法（隔墙法）：在最后一个浮动的元素后面加上一个标签（W3C推荐做法）

<div class="two" style="clear:both"></div>

缺点：添加许多无意义的标签，结构性较差

②给父级加overflow：将属性设置为：hidden或auto或scroll

    .father {
      width: 450px;
      height: 450px;
      background-color: blanchedalmond;
      overflow: hidden;
    }

缺点：会让内容隐藏掉，无法显示溢出的部分

③给父级加：after伪元素：

额外标签发的升级，相当于盒子后面加了一个新盒子

    .clearfix:after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

    .clearfix {
      /* IE6、7 专有 */
      *zoom: 1;
    }

优点：没有增加新标签，结构更简单

缺点：需要照顾低版本浏览器

④给父级加双伪元素：

    .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
    }

    .clearfix:after {
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }

优点：代码更简洁

缺点：需要照顾低版本浏览器