CSS Float

浮动设计的初衷并不是用来布局的，而仅仅是为了实现图片文字环绕效果，即图片做浮动，文字环绕图片。简单来说就是块级元素无视float元素，让行内元素如流水一样围绕着float元素以实现浮动布局。

CSS标准文档流在正常情况下，默认布局是页面从左向右、从上向下、遇块换行的方式。float属性可以打破标准文档流默认的布局从而实现特殊的布局。浮动会让块级元素脱离文档流，漂浮在文档流之上，紧贴着父元素的左右边框，因此和文档流并不处于同一个层次。

浮动元素不仅会影响自身，还会影响周围元素对齐进行环绕。浮动元素在文档流空出的位置会由后续非浮动元素填充上去，如果是块级元素会直接填充，若跟浮动元素的范围发生重叠，则浮动元素会覆盖块级元素。若是内联元素则有空隙就会插入。

浮动属性用于设置元素水平向左或向右移动，其周围元素同时会自动排列。浮动元素会尽量向左或向右移动，直到其外边缘触碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它，浮动元素之前的元素将不受影响。

包含块

理解浮动前需掌握一个概念包含块，包含块是浮动元素的包含块是指距离浮动元素最近的块级祖先元素。不管元素自身是行内元素还是块级元素，若设置了float属性，则浮动元素会自动生成一个块级框，因此可以设置其width和height。

浮动表现特征

当元素设置浮动属性后，会表现出如下特性：

高度坍塌

浮动属性的本质是用来破坏文档流，因此设置元素浮动属性后会导致父元素高度塌陷。

例如：

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto p-4">
  <div class="p-4 bg-gray-200 mb-4">
    <img src="https://source.unsplash.com/300x300" />
  </div>
  <div class="p-4 bg-gray-400">
    <img src="https://source.unsplash.com/300x300" class="float-left" />
  </div>
</div>

float

包裹性

包裹性包含包裹和自适应两个特征

1. 包裹是指若浮动元素的子元素宽度足够小，则父级浮动元素宽度就是子元素的宽度。
2. 自适应是指若浮动元素的父元素已设置宽度且浮动元素的子元素宽度超出父元素，则浮动元素宽度最终会表现为父元素的宽度。

例如：默认div元素的width是100%的，一旦为其设置float属性则立即会像inline元素一样产生包裹，同时width会跟随内容自适应。

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="p-4 bg-gray-200">
  <img src="https://source.unsplash.com/300x300" />
</div>

<div class="p-4 bg-gray-400 float-left">
  <img src="https://source.unsplash.com/300x300" />
</div>

float

BFC 块状格式化上下文

当元素设置了浮动属性，其display显示属性最终值会表现为block或table。也就是说，不管元素本身是inline还是block的元素，只要设置了float属性，则浮动元素就会生成一个块级框，因此可以设置width和height。

添加float属性后的元素可以设置width和height，元素浮动后会转换为inline-block类型的元素，同时拥有块级和行内元素的特征。

外边距合并失效（Margin Collapse）

元素设置了浮动属性后会自动形成BFC，因此也就没有margin合并的效果。

• 行盒和浮动元素不可重叠性
  行框盒子和浮动元素不会发生重叠

浮动的作用机制

在理解浮动的作用机制前需掌握两个概念，分别是浮动锚点和浮动参考。

• 浮动锚点

浮动锚点是浮动元素所在流中的一个点，这个点本身并不浮动，它表现得就像一个没有margin、padding、border的空的内联元素。

• 浮动参考

浮动参考是指浮动元素对齐参考的实体，float的参考元素是行框盒子，因为float设计的初衷就是为了实现文字环绕效果。

例如：

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="bg-gray-200 p-4">
  <span class="bg-gray-400">标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</span>
  <a href="" class="bg-gray-700 text-white float-right">浮动链接</a>
</div>

<div class="bg-gray-200 p-4">
  <p class="bg-gray-400">标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
  <a href="" class="bg-gray-700 text-white float-right">浮动链接</a>
</div>

float

为什么浮动元素会出现在第二行显示呢？

当前浮动元素的浮动参考是一个行框盒子，也就是浮动元素在当前行框盒子内定位。因此链接会出现在第二行展示。如果浮动元素前后没有内联元素，则不存在行框盒子，此时浮动锚点会其作用，因为浮动锚点表现得就像一个内联元素。

Float与BFC

若元素设置了float浮动属性后会自动建立一个新的块级格式化上下文（BFC），BFC也是HTML中的一个盒子只是看不见而已，BFC是页面上一个隔离的独立容器，容器内的子元素不会影响到外部的元素。

如何形成BFC盒子呢？

• float属性不为none
• position属性不为stataic或relative
• display属性不为table-cell、table-caption、inline-block、flex、inline-flex
• overflow属性不为visible

在BFC盒子中又自己独立的布局规则：

• BFC内部的Box会在垂直方向一个接一个的摆放
• BFC内部的Box垂直方向距离由margin决定
• 属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin-box的左边与包含块的border-box的左侧接触
• 计算BFC高度时浮动元素也会参与计算
• BFC区域不与float-box发生重叠

例如：使用overflow:hidden属性生成BFC，利用BFC消除Margin Collapse。

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto p-4 bg-gray-200 overflow-hidden">
  <div class="my-4 text-center bg-white"><img src="https://source.unsplash.com/100x100" /></div>
  <div class="my-4 text-center bg-white"><img src="https://source.unsplash.com/100x100" /></div>
  <div class="overflow-hidden bg-black">
    <div class="my-4 text-center bg-white"><img src="https://source.unsplash.com/100x100" /></div>
   </div>
</div>

Margin Collapse

例如：利用BFC容纳浮动元素解决高度坍塌问题

高度坍塌

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto p-4 bg-gray-200">
  <div class="my-4 text-center bg-white">
    <img src="https://source.unsplash.com/100x100" />
  </div>
  <div class="my-4 text-center bg-white overflow-hidden">
    <img src="https://source.unsplash.com/100x100" class="float-left"/>
  </div>
</div>

设置父元素overflow:hidden以生成BFC，用于容纳float:left的浮动子元素。

BFC Float

例如：阻止文本换行

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto bg-gray-200 p-4 overflow-hidden">
  <img src="http://source.unsplash.com/100x100" class="float-left mr-4">
  <p class="">阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行阻止文本换行</p>
</div>

文字环绕图片

为p元素添加overflow:hidden转换为一个BFC盒子，即可实现阻止文本换行的效果。

阻止文本换行

清除浮动

为目标元素设置clear属性可清除浮动元素对目标元素带来的影响

闭合浮动

• 额外标签法
  在浮动元素后添加空元素并设置clear:both属性

• 触发BFC法
  设置父元素的overflow:hidden或display:table自动生成BFC以闭合浮动

• 伪类清除法
  使用after伪类元素清除浮动

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

• 双伪类元素清除法
  为父类添加.clearfix不仅可清除浮动，还可解决高度塌陷问题。

.clearfix:before, .clearfix:after{content:""; display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}