关于浮动和定位

1.什么是浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。（无论父元素是否脱标）

2.浮动的特性

• 不超出内边距
• 使元素变为行内块元素（浮动的目的就是为了让块级元素在同一行显示）

3.浮动会产生什么影响？

• 父盒子高度塌陷（父盒子没有设置高度的时候，因为子盒子浮动脱标，撑不起盒子）
• 浮动元素后面的同级块元素会被盖住，但是块级元素的文字会环绕浮动元素，同级内联元素会跟在浮动元素的后面（清除浮动后，同级的块级元素和内联元素都会跑到浮动元素的下面，可以理解为清除浮动后，浮动元素不再是行内块了，而是块级，独占一行，所以内联元素也要另起一行了）

4.清除浮动的方法

• 额外标签法：在浮动元素末尾添加一个空的标签例如

  <div style="clear:both"></div>

• 使用伪元素清除浮动（原理：给浮动元素的父元素添加伪元素，代替在浮动元素后面添加空标签清除浮动）

/*清除后浮动*/
.clear:after{
    content: "";
    display: block;
    clear: both;
}
/*清除前后浮动  父元素上面如果也有元素浮动，使用before可以清除浮动的影响*/
.clear:after,.clear:before {
content: "";
display: block;
clear: both;
}

• 使用BFC清除浮动(父元素overflow:hidden)

伪类和伪元素

ss引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分；

什么是伪元素

伪元素用于创建一些不在文档树中的元素并为其添加样式
E::before/E:before在E元素内部创建一个行内元素，作为E的第一个孩子,需要使用content属性来指定要插入的内容。被插入的内容实际上不在文档树中;
E::after/E:after 在E元素内部创建一个行内元素，作为E的最后一个孩子,其用法和特性与:before相似;

什么是伪类

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的

伪元素和伪类的根本区别

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

什么是BFC

BFC 意思是块级格式化上下文

什么元素能产生BFC？

display属性为block, list-item, table 的元素，会产生BFC.

display属性为block, list-item, table 的元素如何产生BFC？

• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible（auto　scroll　hidden）

什么是定位

让元素去到任意想去的位置

定位的分类

• 相对定位（相当于自己的位置移动，原位置保留，移动后的位置脱标）
• 绝对定位（相当于最近的已经定位的父元素位置移动，如果没有，相当于浏览器移动）
• 固定定位（相当于浏览器的位置移动，不随滚动条滚动）

绝对定位和固定定位的相同点和不同点

• 相同点： 脱标 改变行内元素的呈现方式，display为block
• 不同点： 固定定位的根元素固定为浏览器，不可改变