浮动-float

浮动

浮动 float：none、left、right

1.文档流
html元素，它的排版方式
默认的排版（标准文档流）：从上到下，从左到右

2.浮动的响应
（1）设置了浮动的元素，内容有多少就有多宽，不再独占一行
（2）浮动后的元素，向上移动了
（3）浮动的元素与下面的向上移动的元素，发生了重叠，但是元素内的内容（即内联元素），不会被覆盖，它会见隙插入显示
（4）使父元素高度塌陷

3.原理
给元素设置了float后，元素脱离标准文档流，进行左右浮动，紧贴着当前的位置，浮动元素之后的标准元素就向上填充，块级元素直接向上，内联元素如果有重叠，不允许重叠显示。浮动元素也有它排版方式，称之为浮动流（浮动层）。
注意：浮动层只有一层
浮动层排版：从左（右）到右（左），从上到下

4.清除浮动带来的影响
clear：both、left、right
（相当于把浮动元素的高度也算在盒子的高度里）

5.扩展盒子的高度（清除浮动的影响）
（1）clear属性清除浮动
（2）为塌陷的父元素设置高度
（3）让父元素和子元素一起浮动（不推荐）
（4）为父元素设置overflow属性（visible这个值没有效果）
（5）为塌陷的父元素添加一个after伪类

注意：clear属性，必须作用于快递元素才有效

6.overflow属性：溢出处理
hidden（隐藏）、visible（显示，默认值）、scroll（滚动）、auto（自动）
隐藏功能：扩展父元素的高度

7.clear与overflow的区别
clear：任何情况下都可以使用，会添加一个新的标签
overflow：减少了空的html标签，提高网页的性能，但overflow不能用于绝对定位的元素进行高度扩展

8.伪类
超链接伪类的顺序： love-hate
未点击： a:link{ }
已访问： a:visited{ }
鼠标悬停： a:hover{ }
激活： a:active{ }
注意：hover与active其他元素也具有这个伪类

9.浮动的应用

• 布局
• 导航