浮动是什么

• 浮动是HTML元素存在的第二种状态。
• 在这种状态下，它的五大特征：
  • 浮：浮动元素会脱离文档流。(浮动元素后面的元素流动元素会占据浮动元素的原有位置)
  • 动：浮动元素会向左或右无限运动，直到它碰到另一个元素。
  • 块：所有的浮动元素都是块元素。(没有行内元素，行内直接变块)
  • 并排：浮动元素会发生并排现象。
  • 混排：文字会环绕浮动图片排列。

浮动属性

定义
float属性定义元素元素的浮动方式。

语法

选择器{
    float:none / left / right ;
}

• none：默认值，元素不浮动
• left：让元素向左移动
• right：让元素向右移动

如何设置元素并排

第一步：确定子元素
第二步：确定父元素
第三步：给子元素添加float
第四步：给子元素设置合理宽度
第五步：清除浮动

高度坍塌

1.高度坍塌：是指子元素浮动之后，父元素失去高度，后续元素上移
2.元素上移：造成布局发生混乱。（用clear属性解决）

浮动的问题和解决办法

第一种：使用空元素（不推荐）
第二种：BFC | haslayout
第三种：使用伪元素

clear属性

定义：清除元素两侧的浮动影响。

语法

footer{
  clear：left | right | both | none
}

• left：左侧清除浮动
• right：右侧清除浮动
• both ：两侧清除浮动
• none：不清除浮动

网页布局
web1.0时代
1989年 没有css：使用标签的属性来做网页外观。
web2.0 HTML结构 + css样式 + js行为 互相独立、分离
2000年 以后
布局方式 ：div布局

• 流动布局
• 浮动布局：口字型布局、工字型布局、两栏布局、三栏布局 自适应布局、双飞布局、神杯布局
• 定位布局

2013年：移动互联网时代

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

关于边距值

• 外边距可以取负值
• 内边距不可以取负值

向HTML页面引入css的样式
1.使用link标签引入
2.使用style标签引入
3.使用style属性引入
4.使用@im