浮动布局
-
浮动是什么？
浮动式HTML元素存在的第二种状态
在这种状态下：
浮：元素会脱离文档流（浮动元素后面的流动元素会占据浮动元素的原有位置）
动：浮动元素会向左或向右无限运动，直到它碰到另一个元素。
块：所有的元素都是块元素
并排：浮动元素会发生并排现象
混排：文字围绕图片排列
浮动不是为布局而生的。 -
浮动属性
float:定义元素的浮动方式
语法：
.container{
float:none | left | right;
}
属性值
none ：元素不浮动
left：让元素向左浮动
right：让元素向右浮动
如何设置元素并排
1.确定子元素
2.确定父元素
3.给子元素添加float属性
4.给子元素设置合理宽度
5.清除浮动
高度坍塌
高度坍塌是指，子元素浮动之后，父元素失去高度。造成后续元素上移，造成布局发生混乱。
-
浮动的问题
一：高度坍塌：指子元素浮动后，父元素失去高度
二：元素上移，造成布局发生混乱。（clear）
-
浮动问题的解决办法
1.使用空元素（不推荐）
在塌陷的父级内创建一个空标签设置clear属性。
2.BFC | haslayout
3. 使用伪元素
/*在塌陷的父级上设置一个伪元素*/
section::after{
content: "";
display: block;
clear: both;
height: 0;
}
clear
定义：清除元素两侧的浮动影响。
footer{
clear:left | right | both | none
}
属性值：
none ：默认不清除
both：清除元素两侧
left：清除左侧
right：清除右侧
网页布局
web 1.0 时代 ：一盘散沙，混论没有标准 IE大行其道
1989年 没有css：使用标签的属性来做页面的外观。
布局方式：表格
wed 2.0 ：HTML结构 + css样式 + js行为 互相独立 ，分离
2000年以后
布局方式：div布局
- 流动布局
- 定位布局
-
浮动布局
1.口字形布局
2.工字形布局
3.两栏布局
4.三栏布局
5.自适应布局
6.双飞翼布局
7.圣杯布局
2012年，在移动互联网时代
- 弹性盒模型
- 网格布局：普适布局系统
@font-face规则
1.属性名称
- font字体
- face外观
2.定义：用于定义元素的自定义字体。
3.自定义字体？
自定义字体是非系统字体。也是非安全字体
4.什么是安全字体
安全字体就是系统字体
系统字体就是安全字体
设置font-family首选安全字体
自从@font-face规则出现后，我们可以在页面中引用非安全字体
5.语法
/*第一步：定义自定义字体*/
@font-face规则{/*大括号：设置引用自定义字体的规则*/
/*font-family是规则符，不是属性。用于描述字体名称*/
font-family:'自定义字体名称'；
/*url：指定自定义字体文件的路径（相对位置、绝对路径）*/
url（'自定义字体文件.otf'）format('otf')
/*第二步：向元素应用自定义字体*/
#logo{
font-family:'自定义字体名称'；
}
}
body{
font-family:'serif'
}
6.自定义字体免费字库
www.iconfont.cn
英文字库：谷歌字库
