浮动是什么
- 浮动是HTML元素存在的第二种状态
- 在这种状态下，它的五大特征：
- 所有的元素都是块元素
- 符：浮动元素会脱离文档流
- 动：浮动元素会向左或右无线运动，直到它碰到另一个元素。
- 块：所有的浮动元素都是块元素（没有行内元素）
- 并排：浮动元素会发生并排现象
- 混排：文字会环绕浮动图片排列
浮动属性
定义：float属性定义元素元素的浮动方式
语法：
选择器{
float：none | left | right；
}
属性值：
- none：默认值。元素不浮动（浮动元素后面的流动元素会占据浮动元素的原有位置）
- left：让元素向左浮动或向右无线运动，直到它碰到另一个元素。
- right：让元素向右浮动
设置元素并排
1.确定子元素
2.确定父元素
3.给子元素添加float
4.给子元素设置合理的宽度
5.清除浮动
高度坍塌
高度坍塌是指子元素浮动之后，父元素失去高度。造成后续元素上移，造成布局发生混乱。
1.高度坍塌：指子元素浮动之后，父元素丢失
如何清除浮动
第一种：BFC | haslayout
第二种：使用伪元素
第三种：使用空元素（不推荐）
网页布局
1989 没有css：使用标签的属性来做页面外观。
布局方式：表格
web2.0HTML结构+ css样式+JS行为 互相独立、分离
2000年 以后
布局方式L:div布局（div）
- 流动布局
- 浮动布局：
- 口字型
- 工字型
- 两栏
- 定位布局
2013你年：移动互联网时代 - 弹性盒模型 ：
- 网格布局：适合布局系统
clear属性
定义：清除元素两侧的浮动影响。
语法
footer{
clear：left | rigth | both | none
}
- left
- right
- both
- none
浮动的问题和解决方法
向HTML页面引入css的方式
1.使用link标签映入
2.使用style标签引入
3.使用link
