css笔记三：float

1.float定义

1. float本意是：文字像流水一样环绕图片。

2.float的特点

3.float常见使用布局

4.float与其他的区别

5.float的注意事项

float和vertical-align共存时，vertical-align失效。
是因为使用float后，元素从网页正常流动中移除，脱离文档流，触发BFC，元素的布局就不会受环境影响了。

6.其他

1.BFC是什么？

1. bfc的概念

   BFC是一个隔离容器，容器里面的子元素和外面的元素互不影响；

2. bfc的形成

   1.根元素
   2.float不为none
   3.position: absolute,fixed
   4.overflow: 不为visiable
   5.display：inline-block, table-cell, table-caption, flex, inline-flex

3. bfc的布局规则

   1.内部元素，垂直摆放。
   2.同一bfc下的margin重叠
   3.每个元素都靠左边或者右边，即便是float元素
   4.bfc下不合float box重叠
   5. bfc子元素和外面互不影响。
   6. 计算bfc高度时，浮动元素也参与计算。

4. bfc的常见使用

   bfc两栏布局，比浮动+margin撑开相比，不用计算宽度。 （布局规则3和4）
   清除内部浮动 （布局规则6）
   margin重叠 （布局规则4）

5. 引用文章：bfc原理详解