大纲
浮动布局
网页布局
浮动布局
浮动是什么？
- 浮动是HTML元素存在的第二种状态
在这种状态下，它的五大特征：
- 浮：元素会脱离文档流。（浮动元素后面的流动元素会占据浮动元素）
- 动：浮动元素会向左或向右无限运动。直到它碰到另一个元素
- 块：所有的元素都是块元素。（没有行内元素）
- 并排：浮动元素会发生并排现象。
- 混排：文字会围绕浮动图片排列。
浮动属性
定义：float属性定义元素的浮动方式。
语法
选择器{
float:none | left | right;
}
属性值：
- none：默认值、元素不浮动
- left：让元素向左浮动
- right：让元素向右浮动
如何设置元素并排
第一步：确定子元素
第二步：确定父元素
第三步：给子元素添加float属性
第四步：给 子元素设置合理宽度
第五步：清除浮动
浮动带来的问题
1.高度坍塌：指子元素浮动之后，父元素失去高度；
2.元素上移：造成布局发生混乱。
如何清除浮动
第一种：使用空元素（不推荐）
第二种：BFC | haslayout
第三种：使用伪元素
clear属性
定义：清除元素两侧的浮动影响。
语法
footer{
clear: left | right | both | none
}
- left：清除元素左侧的浮动影响
- right：清除元素右侧的浮动影响
- both：清除元素两侧的浮动影响
- none：不清除，默认值。
网页布局
web1.0时代：一盘散沙 混乱，没有标准 ， IE大行其道
1989年，没有CSS，使用标签的属性来做页面外观；
布局方式：表格布局（table）。
web2.0：HTML结构 + CSS样式 + JS行为 互相独立、分离
2000年以后
布局方式：div布局（div）
- 流动布局
- 浮动布局
- 口字型布局；
- 工子型布局；
- 两栏布局；
- 三栏布局；
- 自适应布局；
- 爽飞翼布局；
- 圣杯布局
- 定位布局
2013年：移动互联网时代
- 弹性盒模型
- 网格布局：普适布局系统
向HTML页面引入CSS的方式
- 使用link标签引入
- 使用style标签引入
- 使用style属性引入
- 使用@import规则引入
CSS引入示例
/*外部樣式表 rel：relation:关系； alternate候选； title：首选*/
<link rel="stylesheet" href="./red.css" title="red"/>
