大纲

浮动布局
网页布局

浮动布局

浮动是什么？

• 浮动是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）

• 流动布局
• 浮动布局
  1. 口字型布局；
  2. 工子型布局；
  3. 两栏布局；
  4. 三栏布局；
  5. 自适应布局；
  6. 爽飞翼布局；
  7. 圣杯布局
• 定位布局

2013年：移动互联网时代

• 弹性盒模型
• 网格布局：普适布局系统

向HTML页面引入CSS的方式

1. 使用link标签引入
2. 使用style标签引入
3. 使用style属性引入
4. 使用@import规则引入

CSS引入示例

/*外部樣式表 rel：relation:关系； alternate候选； title：首选*/
    <link rel="stylesheet" href="./red.css" title="red"/>