浮动与BFC

浮动

1. 什么是浮动？

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素，其周围的元素也会重新排列

浮动属性：

• none：默认值。元素不浮动，元素会按照标准文档流显示位置
• left：元素向左浮动
• right：元素向右浮动
• inherit：规定应该从父元素继承 float 属性的值

float: none|left|right;

2. 什么是标准文档流？

标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素

• 空白折叠现象
• 文字类的元素如果排在一行会出现一种高低不齐，底边对齐的效果
• 自动换行，元素内一行内容写满元素的 width 时会自动换行
• 块级元素可以设置宽高，必须独占一行，不能和其它标签并排，不设置宽度会自动撑满父级元素的width区域；高度不设置，会被内容自动撑开
• 行内元素不能设置宽度和高度，与其它行内或行内块元素并排一行显示，不论设置宽高，宽度和高度都只能被内容撑开
• 行内块元素可以设置宽高，可以和其它行内元素和行内块元素并排，高度不设置，要么以原始尺寸加载要么被内容撑开

3. 浮动的特性

3-1 脱离标准文档流

• 浮动可以实现图文混排（文字环绕在图片周围）
• 浮动元素会完全脱离文档流，不再占据文档流中的位置
• 浮动的元素自会影响浮动元素后面的元素。不会影响浮动元素前面的元素
• 设置浮动后，后面没有设置浮动的盒子占据它的位置，浮动的元素会遮住标准文档流的元素，里面文字内容不会被遮住

3-2 内联排列

• 如果多个盒子设置了浮动ÿ