有关浮动

什么是浮动（float）？

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动有三个属性：

float:left;
float:right
float:none

浮动的特性：

1. 使元素脱离文档流。
2. 提升层级半级（只覆盖主体不覆盖内容）。
3. 会使不支持宽高的元素支持宽高。
4. 如果没有设置宽度，浮动元素由内容去撑开宽度。
5. 浮动元素什么时候停止。

• 遇到父级元素的边框的时候会停止。
• 遇到相同的浮动元素时会停止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

什么是文档流？

摘自百度百科：
文档流是文档中可显示对象在排列时所占用的位置。比如网页的<div>它默认占用的宽度位置是一整行，<p>标签默认占用宽度也是一整行，因为<div>标签和<p>标签是块状对象。网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。

浮动的使用

在最开始，设计浮动的效果并不是为了什么高大上的布局，仅仅是想解决文字环绕显示的问题。文字环绕就像是浮动的"本职工作"一样。但是，通过“审查元素”各大网站的主页我们可以发现，浮动这个属性目前已经大量的进行使用。

例如，将元素设置浮动了之后,inline元素就可支持宽高，感觉就像是一个自带定位属性的inline-block。通过对 IE 浏览器兼容性的学习笔者还发现，给元素设置浮动之后，给元素多设置一个属性display:inline还可以解决浮动的某些对低版本浏览器的兼容性问题（当然对于目前的前端开发来说已经很少去考虑对低版本浏览器的兼容了）。同时，浮动可以让 <li>这类block水平排列。浮动可以无需计算margin就可以很轻松让元素直接置于父元素的最右边。或者是在页面总体框架的布局上也可以使用浮动。

浮动的大量使用会产生很多相对应的影响，例如说我们给一个块元素中书写一个，内联元素，如果没给父元素设置宽高，正常情况下父元素是由子集元素去撑开它的高度，如果给子集元素设置浮动。就会造成父级元素的坍塌。毕竟，儿子已经上天了，老子由谁去撑起来呢？附上代码，有兴趣的同学可以试试，把注释去掉做一下对比。

HTML

<div class="father">
  <div class="child"></div>
</div>

CSS

.father{
  border:5px solid #000;
  background: pink;
}
.child{
  width: 300px;
  height: 300px;
  background: red;

  /*float: left;*/
}

浮动元素除了具有包容性，还具有破坏性，以为浮动使元素脱离了文档流，会使浮动元素不占据空间，造成了父元素的坍塌。或者影响其他的布局。当然有可能还会造成其他的影响。这里就要引入清除浮动。

注意：

在说清除浮动之前，先说一些使用浮动需要注意的事情。

• 浮动元素不会超出父元素的content。
• 如果要同时对多个元素设置浮动，如果元素高度不一致，容易出现“卡住”的情况。
• 同时设置多个元素向左或向右浮动，浮动顺序会依次显示，根据浮动的特性:
  left：1、2、3、4、...
  right：4、3、2、1、...
• 浮动元素最好尽可能高的放置。
• 内联元素与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素“之上”显示。因为内联元素的宽高以及背景颜色都与内容大小有关，浮动元素无法浮动在内容之上。换句话说就是浮动元素无法浮在内联元素上，内联元素会被往左（或右）挤出去（内联块元素也一样）。

清除浮动

重点来了，在这强调一下，清除浮动很重要，很重要，很重要，重要的事情说三遍。作为一个前端开发者，浮动属性是使用最频繁的属性之一，而消除浮动所造成的影响，就必须将几种方法了然于胸。总结于下：

方法一：添加新的元素、应用clear

先说一下clear属性：

元素的某一侧不允许出现浮动元素。

可能的值

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

遇到父元素高度的坍塌，可以在浮动元素后再添加一个新的元素，然后赋予它一个属性claer:both，这样就可以解决问题。但是注意，一定要新建一个元素，不能在浮动元素中添加clear属性。该属性只对元素周围的浮动元素造成影响，是不会消除自身的浮动的。

但是这样会添加无用的标签，使的 HTML 中会新增更多冗余代码。

方法二：伪元素

这是一个清除浮动相对比较好的方法之一，可以减少使用无意义的标签，使代码更加简洁。给予浮动元素添加一个伪元素:after。利用这个伪元素来清除浮动。不过这里要注意一点伪元素默认生成的代码是行内元素，而clear的对象必须是块级元素，否则不起作用，所以要设置display属性。代码如下：

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

大部分情况下，比较推荐使用该方法去清除浮动。这也是在各大网站中最普遍的清除浮动的方法。

另外，在伪元素中设置display属性为table，也是一种比较推荐的方法。

方法三：overflow

惯例，先补一下overflow属性：

overflow 属性规定当内容溢出元素框时发生的事情。

可能的值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

给浮动元素的父元素添加overflow:hidden可以清除浮动。

方法四：父容器设置浮动

儿子飘了，那老子也一起飘，那大家都一起飘，当然可以解除浮动带来的影响了。但是问题来了。儿子飘了是小事，怎么飘也飘不出五指山的范围，五指山飘了，那问题就大条了。会给之后的元素造成影响。而且这个也没有根本上解决浮动问题，所以极度不推荐该方法。

方法五：给父容器设置宽高

让父集自己撑起来，不需要子集元素去撑起父容器，这样就不会造成坍塌，但是也许会对布局带来不便，所以也不是特别推荐该方法。

方法六：给父级元素设置display:inlene-block

给父容器设置display:inline-block之后，容器就可以形成 BFC ，这样就会有独立的渲染空间，所以就算偶遇浮动元素也会把容器撑开。

BFC

简单科普一下什么是 BFC ：

BFC ( Block formatting context ) 直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

BFC 布局规则：

• 内部的 Box 会在垂直方向，一个接一个地放置。
• Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的margin会发生重叠。
• 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC 的区域不会与 float box 重叠。
• BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算 BFC 的高度时，浮动元素也参与计算。

触发 BFC 的条件：

属性	值
根元素
float	不为none
overflow	不为visible
display	table-cell table-caption inline-block inline-flex flex
position	absolute fixed

写在最后

笔者只是刚刚走上前端开发的初学者，目前还在学习中，最近正在学习 HTML+CSS 基础，学习过浮动之后就萌生了想将各项知识点总结一番的冲动。如有什么地方有遗漏或者有误，望指出。谢谢。