css（五）-浮动

一.基础

1.什么是浮动？
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
2.为什么需要浮动？
如果多个盒子水平排列成一行，虽然将块元素转成行内元素可以实现，但是块元素之间会出现大的空白缝隙，很难控制。很多布局是标准流无法实现的，所以需要浮动

网页布局第一准则：多个块级元素纵向排列找标准流，多个元素块级元素横向排列找浮动

3.浮动的特点
1.浮动元素会脱离文档流（不再保留原来的位置，俗称脱标）；
2.浮动的元素会一行内显示；
3.浮动元素会具有行内块元素的特性
4.浮动布局的注意点
1.先用标准流的父元素排列上下位置，之后内部资源苏采取浮动排列左右位置；
2.一个元素浮动了，理论上其余的兄弟元素都要浮动，避免引起问题；浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
5.清除浮动

1.清除浮动的本质：
本质是清除浮动元素造成的影响，如果父盒子本身有高度不需要清除浮动；清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度就不会影响下面的标准流
2.为什么要清除浮动？
由于父级元素很多情况下不方便给高度，但是子盒子不浮动又不占有位置，导致父级盒子高度为0，产生高度塌陷问题，对后面的排版会产生影响。
3.清除浮动的策略：闭合浮动
4.清除浮动方法：
（1）额外标签法（w3c推荐）；
在浮动元素末尾添加一个空的标签.clear{clear:both},实际工作可能会遇到，但是不常用
（2）父级添加overflow属性；
可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll（子不教，父之过）。
（3）父级添加after伪元素；

（4）父级添加双伪元素

6.浮动效果：
如果兄弟元素是块级元素，则会被浮动元素遮挡，如果是内联元素，则会尽可能围绕浮动元素，文字会环绕，不会被遮挡

二.面试题

1.清除浮动的原理

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，
最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

1.clear只会清除自身所在前面的元素的浮动
2.clear属性只作用在块级元素上

2.使用BFC清除浮动

BFC（block formatting context）：块级格式化上下文；将BFC看成是一种属性，拥有了该属性的元素就相当于一块独立的区域，可以将该元素看成是隔离了的容器，容器内的元素不会影响容器外的元素。
实现BFC属性的方法：
1.浮动元素，float 除 none 以外的值
2.定位元素，position的值不是static或者relative。
3.display 为 inline-block 、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid
4.overflow 除了 visible 以外的值（hidden，auto，scroll）
5.根元素 就是一个 BFC

BFC的作用：
1.避免外边距重合
2.清除浮动