CSS 浮动/BFC/清除浮动
1，实现 CSS 布局的几种策略2，正常布局流（Normal Flow)2.1，正常布局流中，块级元素的排列方式2.2，正常布局流中， 内联元素排版方式 3，浮动布局3.1，浮动布局起源3.2，浮动是如何工作的3.3，浮动的本质和要点3.4，如何产生浮动 4，元素浮动的特性4.1，元素添加浮动后，脱离文档流4.2，父宽不够，子则换行4.3，浮动的顺序贴靠特性4.4，元素浮动后，具有行内块级元素特性4.5，浮动的元素会造成父元素高度塌陷4.6，浮动对文字的影响4.7，使用浮动实现网页布局 5，BFC 规范 和 浏览器差异5.1，创建 BFC5.2、BFC 的其他作用5.3、浏览器差异 6、清除浮动6.1、方法 16.2、方法 26.3、方法 36.4、方法 4该文先讲解了CSS布局的几种策略，以及正常布局流是什么，然后逐步讲解浮动的由来，本质，如何产生，以及特性，随后讲解BFC规范，如何创建BFC，BFC的作用，最后列出清除浮动的几种方法。
1，实现 CSS 布局的几种策略
网页布局的本质是：用 CSS 来摆放盒子，把盒子摆放到页面对应的位置，CSS 中提供了以下几种不同的 CSS 布局策略，来实现页面的布局：
正常布局流浮动布局定位布局表格布局 （
display: table;）响应式设计弹性布局网格布局多列布局以上每种布局方式，都有自己的用途，也有各自己的优缺点，相互辅助。
2，正常布局流（Normal Flow)
正常布局流 (normal flow) 是指：
在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。正常布局流就是规定了，在默认情况下块级元素和内联元素的排版方式。
2.1，正常布局流中，块级元素的排列方式
块级盒子会从包含块的顶部开始，按序垂直排列；
同级盒子间的垂直距离会由“margin”属性决定；
相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则。
2.2，正常布局流中， 内联元素排版方式
盒子会从包含块的顶部开始，按序水平排列；
只有水平外边距（垂直方向无效）、边框和内边距会被保留；
这些盒子可以以不同的方式在垂直方向对齐：可以底部对齐或顶部对其，或者按文字底部进行对齐。
深入 CSS 布局的不同方式，点击查看详细内容 👆(opens new window)
CSS 布局功能，点击查看详细内容 👆(opens new window)
3，浮动布局
3.1，浮动布局起源
最初：
引入
float属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边，但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。
3.2，浮动是如何工作的
简单理解：
当元素添加了浮动后，元素就会脱离文档流，按照指定方向（左右）发生移动，遇到父级边界或者相邻的浮动元素就会停下来，同时会影响到他后面元素的排版行为。
文档流： 文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)。脱离文档流： 元素相当于漂浮起来，不占据页面中的位置。
3.3，浮动的本质和要点
浮动的本质功能：用来实现并排；
浮动使用要点：要浮动，并排的盒子都要设置浮动；
父盒子要有足够的宽度，否则子盒子会掉下去。
3.4，如何产生浮动
产生浮动只要给需要浮动的元素添加 float 属性即可。
float属性值：
① none 默认值，元素不浮动；② left 元素向左浮动；③ right 元素向右浮动；④ inherit 规定应该从父元素继承 float 属性的值。（一般不用，了解即可）。
4，元素浮动的特性
4.1，元素添加浮动后，脱离文档流
同时会影响其后面的元素，但不影响它前面的元素。
4.2，父宽不够，子则换行
子元素在放不下的情况下会换行显示。
4.3，浮动的顺序贴靠特性
子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找在前一个兄弟元素。
4.4，元素浮动后，具有行内块级元素特性
浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流；一律能够设置宽度和高度，即使它是 span 标签 或 a 标签 等等。
4.5，浮动的元素会造成父元素高度塌陷
当给子元素添加了浮动后，子元素相当于漂浮起来，不占据页面空间；这样就造成父级元素在没有设置高度时，高度塌陷问题。
4.6，浮动对文字的影响
浮动后其相邻的文字，就会环绕图片排列。
4.7，使用浮动实现网页布局
垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动；每一个盒子都是独立存在，每个盒子中又是一个小天地，内部可以继续使用浮动。
5，BFC 规范 和 浏览器差异
BFC （Box Formatting Context ，块级格式上下文）是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素，反之亦然。
如：一个盒子不设置 height，当内容子元素都浮动时，无法撑起自身，原因是：这个盒子没有形成 BFC。
5.1，创建 BFC
方法 1：设置为浮动，float 的值不能是 none
方法 2：设置定位，position 的值不能是 static 或者 relative
方法 3：转换元素类型，display 的值是 inline-block、flex 或 inline-flex
方法 4：超出部分隐藏，设置
overflow：hidden;
5.2、BFC 的其他作用
BFC 可以消除盒子 margin 塌陷
BFC 可以阻止元素被浮动元素覆盖
5.3、浏览器差异
IE6、7 浏览器使用 haslayout 机制 和 BFC 规范略有差异。比如：IE 浏览器可以使用 zoom:1 属性，让盒子拥有 layout。
如果要制作兼容到 IE6、7 的网页时，尽量让网页布局变得简单，内部有浮动的盒子要设置 height 属性，规范编程，就没有问题。
6、清除浮动
清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响。
6.1、方法 1
让内部有浮动的父盒子形成 BFC，它就能关闭住内部的浮动，此时，最好的方法就是添加
overflow: hidden;属性。
6.2、方法 2
给后面的父盒子设置
clear: both;属性，clear表示清除浮动对自己的影响，both表示左右浮动都清除。该方法不推荐
6.3、方法 3
使用
::after伪元素 给盒子最后面添加一个子元素，并且给::after设置clear:both;。强烈推荐使用，最佳实践
6.4、方法 4
在两个父盒子之间隔一个携带
clear: both;的盒子。不推荐
