CSS浮动

该篇文章中，主要讲解浮动元素的特点，排列方式，以及造成高度坍塌的原因和解决高度坍塌的问题！

在视觉格式化模型中，页面中盒子的排列方式分为三种：

1. 常规流

2. 浮动

3. 定位

今天，我们来讲一下浮动！

浮动的基本特点：

当一个元素浮动后，该元素一定会成为块盒（display为block）;

例子：

a元素是一个inline，行盒。

当设置浮动后，float: left；在浏览器的开发工具中查看，它的display属性已经从inline(行盒)，变成了block(块盒)。

a {
    float: left;
  }

浮动盒子的排列方式：

- none: 默认值，不浮动，为常规流

- left: 靠上靠左排列

- right: 靠上靠右排列

浮动盒子向左或向右移动，直到它外边框碰到父元素的padding或者碰到另一个浮动盒子的边框为止

盒子尺寸

1. 宽度为auto时，适应内容宽度

2. 高度为auto时，适应内容高度

       怎么理解上面两句话呢，也就是说，如果一个父元素，没有设置宽度，那么，该元素的盒子里的内容会把它撑开，内容有多宽，父元素盒子就有多宽，高度也是。

3. 浮动盒子在包含块中排列时，如果常规流盒子在前，浮动盒子会避开常规流块盒

     常规流盒子和浮动盒子混排的情况下，常规流盒子如果先排列，那么浮动盒子会避开常规流盒子，在其后排列。

     例：下图的橙色盒子为常规流块盒，排列时，常规流盒子排在前面，浮动盒子为蓝绿色，避开了常规流盒子，在其后排列。

4. 常规流盒子在排列时，浮动盒子如果在前，常规流盒子则无视浮动盒子

与上一条相反，如果浮动盒子排列在前，常规流块盒是无视浮动盒子的，不会避开排列的。它还是在原来的位置。

（为了让大家看得清楚，我把浮动盒子变成了透明，所以现在，常规流盒子就当浮动盒子不存在一样）

5.  行盒在排列时，会避开浮动盒子

     可以用来做文字环绕图片效果，把图片设置浮动，然后文字就会环绕图片来排列。

该图片中的文字内容是放在p元素中的，图片设置了浮动（float: left;），是浮动该盒子。那么p元素是块盒，而不是行盒，那么为什么，块盒里的文字，还是避开了浮动的图片来排列呢？

原因是，在浮动里有一个规则，那就是：

 >如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒

也就是说，文字放在p元素（块盒）中，但是，浏览器会自动给这些文字加一个行盒容器，来包裹这些文字，是匿名行盒，我们是看不见的，但文字，其实是在匿名行盒里的。

所以，就应用了这条规则: 行盒会避开浮动盒子，而文字环绕里的行盒，其实是指的P元素中文字外围的匿名行盒，所以，在块元素中的文字，还是避开了（图片）浮动盒子的原因。

高度坍塌：

接下来，我们来讲一下，造成高度坍塌的原因，以及解决高度坍塌：

比如，我们写一个div，div没有设置高度，而是由div里的内容来撑开盒子。然后盒子里又有浮动元素，这时，就会发现，div里的内容并不能撑开盒子。但是，我们平常写一个容器，为了排列或者美观，里面可能会有浮动元素存在。那么该如何解决呢？

例：

写一个盒子，高度为0，为了更方便讲解，我们设置个padding（30px），设置个背景色（粉色），这样大家就能看到背景的存在。然后再在里面放3个浮动盒子（橙色）。

这时，我们发现了什么，内容（浮动盒子）并不能撑开容器，容器的高度还是0；

这就是传说中的高度坍塌！

那么，造成高度坍塌的根源是什么？

常规流盒子的自动高度（高度为auto时），在计算时，不会考虑浮动盒子

所以，我们的父元素没有高度，那么高度是auto，由内容来撑开，内容决定父元素的高度。但是，内容里面有浮动盒子，按照规则，它不会把浮动元素的高度计算进去，所以，上图，父元素的高度还是0！因为常规流计算高度，而浮动盒子是脱离常规流的。

以上所有高度坍塌呢，指的是自动高度，那么手动高度呢，就不算在内啦！

解决高度坍塌的办法：

1. 清除浮动：clear

给父元素内部添加一个空的div元素，设置clear:both。

clear 属性规定元素的哪一侧不允许其他浮动元素。

 例：在container父元素中，在item（浮动盒子）的最后，添加一个空盒子(clearfix)，来清除浮动，以解决高度坍塌

    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <!-- 空盒子，用来解决高度坍塌 -->
        <div class="clearfix"></div>
    </div>

.container .clearfix {
    clear: both;
}

效果：

这个方法，不是很推荐，毕竟是多加了一个无意义的标签！ 不太友好，要是多写几个，就有点泛滥！

2.  利用伪类::after

利用::after来清除浮动，跟上面的添加一个空元素来解决浮动是差不多的意思，但是不会凭空添加无意义元素，而是通过伪类的方式。

例：在父元素（.container）中直接添加css样式（.clearfix）

    <div class="container clearfix">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

解决高度坍塌代码（万能代码，直接拿去用就好）

.container::after {
    content: "";
    display: block;
    clear: both；
}

 好啦！今天的浮动讲解，就先写到这里啦！