14定位-1 2

定位

定位：定位元素在页面的位置
默认位置：有，左上角
共两个用法：浮动&定位/float&position
文档流：元素排列的规则
自上向下排成一行一行，从左到右依次排放
块级元素 行内块级元素/内联元素
3种状况使元素离开文档流存在：浮动、绝对定位、固定定位

浮动float

1

会脱离文档流，改变先后排列顺序
none：默认值，不浮动
left：左
right：右
div不显示，忘了定义宽和高

                         人
             看屏幕向左倒90度

颜色1 颜色2 颜色3
_________________________ 浏览器窗口
颜色1float:left 变为
颜色1
颜色2 颜色3
_________________________ 浏览器窗口
一样的大小时显示效果
颜色1 颜色3(颜色2还在的)
_________________________ 浏览器窗口

颜色3float:left 不变，后面没东西了

文档流：1.块级元素垂直方向排列
2.内联或行内块级是水平

2

全部 float:left，块级元素变为水平方向排列
3种水平排列方式：2.表格 3 行内块级
浮动效果最好，不用表格，也没有默认间距

块级元素和行内元素的浮动

块级元素

默认宽度100%，高度0
块级元素设为float，宽度和高度为0，或所有后代元素宽度之和
如果占满父级元素的100%后，会自动换行

内联元素

默认宽度和高度为内容宽度和高度
多个内联元素依旧是水平方向的排列

行内块级元素的浮动

元素之间的空白间隙消失

小米案例

分析
效果方法：1.块级元素+float 2.行内块级
每个元素有宽高，多个元素之间是水平方向排列
1问题：1.要求每个元素之间有空白区域
解决
1.为元素1设置右外边距 元素2向右
1.为元素2设置左外边距 元素2向右
2问题：1.多个元素之间有空白 2.文本内容对齐方式
margin: 0 auto 是居中‘
float是靠左
伪类不可以加空格

浮动的特殊情况

1.父级和子级之间

1.1 子级浮动（父级元素浮动与否无关）
子级元素浮动不能超过父级元素的范围

2.兄弟元素之间

2.1 兄弟元素设置相同浮动，会自动排列
2.2 兄弟元素不同浮动
2.2.1为下一个元素设置，下一个兄弟元素不会超过上一个的位置

3.浮动元素和文字之间的关系

上一个元素浮动后，下一个会往前，它的一部分会被覆盖
但是文字不会被覆盖，而是环绕在浮动元素周边
这是浮动最初的作用，最早页面只有文本和链接，比如新闻报道

清除浮动

属性值，设置元素是否显示在之前元素的下方

none：不会向下清除
left：清除左浮动
right：清除右浮动
both：全部清除
情况1:兄弟之间的元素，上一个设置浮动，下一个无，
为下一个没设置的元素设置clear属性
结果：下一个会显示在上一个浮动的下方
情况2:兄弟之间的元素，全设置浮动
为中间元素设置clear属性
结果：中间元素之后的元素都跟着变
问题：情况1 加一个会怎么样

伪元素清除浮动