浮动、定位

盒模型

盒模型默认指块级元素；行内元素默认不能设置width、height、margin
行内元素==>块级元素: display:block
块级元素==>行内元素: display:inline
注意：
1. disply:inline-block 行内块元素
2. position:absolute|fixed 会将元素变为行内块

使用盒模型

创建浮动盒

可以使用float属性创建浮动盒（脱离文本流），浮动盒将元素的左边界或右边界移动到包含块或者另一个浮动盒的边界。

注意事项：

• 同级的一个元素浮动其他的元素也要浮动
• 浮动脱离文本流，父元素的宽、高不会被撑开
• 子元素浮动父元素一定要清除浮动
• 浮动的行内元素可以设置宽、高

示例：父元素不设置高、宽

<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;}

通过上述三种方法的任意一种，可展示正常

创建布局

定位属性

注意：“left”、”top”、”right”、”bottom”以及”z-index”属性只有设置了定位（除static）才生效。

定位类型

<!-- 页面通用样式 -->
<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）：一直位于可视窗口的指定位置，不受滚动条影响，脱离文档流。