CSS float

float浮动

float 浮动的现象：

0.文字环绕

1.脱离了标准文档流

2.浮动元素互相贴靠

3.浮动元素有收缩现象

最典型的应用：可以让多个块级元素一行内排列显示

重要特性：

1.脱离标准普通流的控制移动到指定位置

2.浮动的盒子不再保留原先的位置

任何元素都可以浮动，不管原先是什么模式的元素，增加浮动之后具有行内块元素相似的特性

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来定

一个元素浮动了。理论上其余的兄弟元素也要浮动

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

请除浮动本质

如果父盒子本身有高度，则不需要请除浮动

请除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有个高度，就不会影响下面的标准流了 则要使用 clear：both

请除浮动解决办法

1.给父元素设置固定高度

缺点：使用不灵活 后期不易维护

应用：网页中盒子固定高度区域，比如固定的导航栏

2.内墙法 额外标签法

规则：在最后一个浮动元素的后面加一个空的块级元素，并且设置该属性clear：both；

注意：这个新增的盒子要求必须是块级元素不能是行内元素

缺点：结构冗余

3.伪元素（选择器）请除

：:after{

content:’ '; 伪元素必须写的属性

display:block; 插入的元素必须是块级

height：0； 不要看见这个元素

clear:both 核心代码请除浮动

visibility：hidden 不要看见这个元素

}

display：table 转换为块级元素并且一行显示

::before 在元素内部的前面插入内容

::after 在元素内部的后面插入内容

注意：

1.before和after 创建一个元素，但是属于行内元素

行内元素不能修改大小

2.新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

3.before 和 after 必须有content属性

4.before 在父元素内容的前面创建元素，after在父元素内容的后面插入元素

5.伪元素选择器和标签选择器一样，权重为1

4.overflow：hidden 给父级添加overflow

BFC区域 一条规则 ：计算BFC的高度时，浮动元素也参与计算

形成BFC的条件：除了overflow：visible的属性值

Block Formtting Context

为什么需要请除浮动：

1、父级没高度

2、子盒子浮动了

3、影响下面布局了，我们就应该请除浮动

为什么需要定位

定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

定位 = 定位模式 +边偏移

定位模式用于指定一个元素在文档中的定位方式，边偏移则决定该元素的最终位置