浮动 （浮起来 脱离标准流布局）
具有行内块元素相似的特性
| 元素值 | 作用 |
|---|---|
| left | 元素浮动到其容器的左侧 |
| right | 元素浮动在其容器的右侧 |
| none | 元素不会浮动（将显示在文本中刚出现的位置）。默认值 |
练习1
<head>
<meta charset="UTF-8">
<title>布局</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #ff6700;
}
.c {
float: left;
}
.l {
float: left;
}
.r {
float: right;
}
.father {
width: 300px;
height: 100px;
margin: 0 auto;
}
</style>
</head>
<body>
标准流 布局：<br>
块元素独占一行 从上到下 <br>
行内元素从左到右 碰到父元素边缘换行 <br>
父元素标准流实现居中
浮动：<br>
<div class="father">
<div class="l">1</div>
<div class="r">2</div>
<div class="c">3</div>
</div>
</body>
清除浮动：有时候父容器不方便给定高度，而浮动不占位置导致 父容器高度为0
清除浮动后，父容器会根据子容器得出高度，就不会影响下面的标准流盒子（前提父盒子没给定高度）
clear：
- none - 允许两侧都有浮动元素。默认值
- left - 左侧不允许浮动元素
- right- 右侧不允许浮动元素
- both - 左侧或右侧均不允许浮动元素
方法：
| 方法 | 举例 |
|---|---|
| 额外标签法 | 在浮动标签末尾添加一个空元素(br 或者不能是行内元素)调用clear :none |
| 父级添加overflow | hidden auto scoll |
| 父级添加:after伪元素 | 如下 |
<style>.clearfix :after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/*ie 6 7*/
*zoom:1;
}</style>
- 定位 可以让盒子自由的在某个盒子内移动或者固定屏幕中的某个位置，并且可以压住盒子。
- 定位=定位模式＋边偏移
- 定位模式
| 模式 | 语义 | 作用 |
|---|---|---|
| static | 静态定位 | 无定位的意思，元素默认的定位方式 |
| relative | 相对 | 元素移动位置的时候，相对它原来的位置移动，原来位置继续占有 |
| absolute | 绝对 | 移动时候相对于最近一级有定位的祖先元素来说，没有祖先元素或者祖先元素没有定位则相对文档，不再占有原有位置 |
| fixed | 固定 | 相对于浏览器得可视窗口，不占位置 |
| sticky | 粘性定位 | 相对于固定的结合 |
- 子绝父相： 子元素用绝对时定位父得用相对定位 好处子不会占有位置不会影响兄弟元素
- 如果有重叠用z-index :x 控制顺序
- 加了绝对定位的盒子不能通过margin: 0 auto 来水平居中 可以通过 left:50%;margin:-xpx; x 盒子自身的一半
