浮动、定位
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://ligang.blog.csdn.net/article/details/56843119
盒模型
盒模型默认指块级元素；行内元素默认不能设置width、height、margin
行内元素==>块级元素: display:block
块级元素==>行内元素: display:inline
注意：
1. disply:inline-block 行内块元素
2. position:absolute|fixed 会将元素变为行内块
使用盒模型
创建浮动盒
可以使用float属性创建浮动盒（脱离文本流），浮动盒将元素的左边界或右边界移动到包含块或者另一个浮动盒的边界。
值 | 说明 |
|---|---|
left | 移动元素，使其左边界挨着包含块的左边界，或者另一个浮动元素的右边界 |
right | 移动元素，使其右边界挨着包含块的右边界，或者另一个浮动元素的右边界 |
none | 元素位置固定 |
注意事项：
- 同级的一个元素浮动其他的元素也要浮动
- 浮动脱离文本流，父元素的宽、高不会被撑开
- 子元素浮动父元素一定要清除浮动
- 浮动的行内元素可以设置宽、高
示例：父元素不设置高、宽
<div class="content">
<div style="float: left;"></div>
<div style="float: right;"></div>
</div>
浮动产生负作用
- 边框不能撑开
- 背景不能显示：如果父级设置了背景，而父级不能被撑开，所以导致不能显示。
- margin padding不能按设置值正常展示：
清除浮动方法
- 浮动元素的同级元素添加一个空标签 .clear{clear: both} <div class="clear"></div>
- 浮动元素的父级元素添加下述样式 overflow:hidden 或者 display:table
- 浮动元素的父级元素使用伪类属性（常用） .clearfix:after{content:""; display:block; clear:both;} .clearfix{zoom: 1;}
通过上述三种方法的任意一种，可展示正常
创建布局
定位属性
属性 | 说明 |
|---|---|
position | 设置定位 |
left|right|top|bottom | 为定位元素设置偏移量 |
z-index | 设置定位元素的层叠顺序 |
注意：“left”、”top”、”right”、”bottom”以及”z-index”属性只有设置了定位（除static）才生效。
定位类型
值 | 说明 |
|---|---|
static | 默认值，元素为普通布局 |
relative | 相对定位，元素位置相对于普通位置定位 |
absolute | 绝对定位，元素相对于position值不为static的第一位祖先元素来定位（脱离文本流） |
fixed | 固定定位，元素相对于浏览器窗口来定位（脱离文本流） |
<!-- 页面通用样式 -->
<style type="text/css">
.content {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #000;
color: #fff;
}
.content div{
width: 100px;
height: 100px;
border: 1px solid;
text-align: center;
line-height: 100px;
}
</style><!-- 定位样式 -->
<style>
.static {
position: static;
background: red;
}
.relative {
position: relative;
top: 50px;
left: 50px;
background: black;
}
.absolute {
position: absolute;
top: 50px;
left: 50px;
background: blue;
}
.fixed {
position: fixed;
top: 50px;
left: 50px;
background: blue;
}
</style>
<!-- 页面结构 -->
<div id="content"></div>
<div id="content">
<div class="static">static-1</div>
<div class="static">static-2</div>
<div class="relative">relative</div>
<div class="absolute">absolute</div>
<div class="fixed">fixed</div>
</div>相对定位（relative）：相对于自己原位置进行偏移，在文本流中的位置依然存在，不脱离文档流；
绝对定位（absolute）：对于position值不为static的第一位祖先元素来定位（未找到，则相对body元素），在正常流中的位置不在存在，脱离文档流；
固定定位（fixed）：一直位于可视窗口的指定位置，不受滚动条影响，脱离文档流。
