浮动布局float

1.文档流

1.1 默认文档流特征
文档结构从内到外，自上而下，从左到右
项目中应用：第一层/第二层布局   H5语义化/;div+css
（1）块级元素：宽度默认100%，高度默认由子元素撑开，宽高可指定；
    同级别垂直方向的线性结构
（2）行内元素：宽高都由内容决定，不可自定义；
    同级别垂直方向的线性结构

2.浮动

1.1 原理
脱离正常文档流，脱离结点树
和兄弟节点之间：浮动在后面的兄弟节点之上
2.1
float：针对修饰的当前元素进行脱离
左浮动固定位置：

float:left ;
margin-left: ;
margin-top: ;

右浮动固定位置：

float:right;
margin-right: ;
margin-top: ;

error!错误搭配：

float:left;      left: ;      top: ;

3.浮动产生的问题

1. 失去对父元素的支撑（高度塌陷）
2. 兄弟元素会顶上来

解决办法：
1.父元素设置高度
2.父元素设置overflow:hidden;（缺点：二级菜单不会显示）
3.clear——消除浮动元素对当前元素所产生的影响。
设置clear后浏览器会自动为元素添加一个外边距，使其位置不受其他影响
可选值：

clear:left; 消除左侧浮动元素对当前元素产生的影响
clear:right; 消除右侧
clear:both;消除两侧中最大影响的那侧

（1）书写位置：可以是下一个非浮动的兄弟节点
（2）在最后一个位置新增一个兄弟
（3）为父元素设置：

父元素::after{
	content:‘’;
	display:block;
	clear:both;
	}