float的基本用法

浮动

float:left;

float:right;

和display的区别：

1、没有空格解析；

2、display的行内是以基线对齐的，使用margin-top会出现行内所有元素全部下移；

3、浮动没有基线问题；

4、display不能控制方向；

文档流

未设置浮动float，普通的html页面就是文档流，也叫做标准流

浮动的定义：

1、设置浮动的元素，遇到父级或者是相邻的浮动元素，会让浮动元素停止在原来位置不变；

2、如果上一个元素是标准流元素，那么这个浮动元素的相对垂直位置不变；

3、相邻的浮动元素会并排在一行（除非上一个元素是标准流元素）；

浮动的表现：

1、控制方向；

2、父级宽度不够，元素会被挤到下一行；

3、浮动会将元素改变为块元素类型；

使用浮动会造成父级的高度塌陷（浮动使得无法撑开父级容器的高度）

解决方法：给父级元素添加 overflow:hidden 样式;

使用的是bfc