定位

• 定位是定义元素框相对于其正常位置应该出现的位置。
• 普通流定位、浮动定位、相对定位、绝对定位

普通流定位

• 页面中的块级元素从上到下一个接一个地排列
• 内联元素将在一行中从左到右排列水平布置
  <div>
  <p>p块级元素</p>
  <h1>h1块级元素</h1>
  <a href="#">a内联元素</a><b>b元素</b>
  </div>

普通流定位

什么是 float？

float 是 css 的定位属性。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对 定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会 影响其它元素，其它元素也不会影响它，无论它是否和其它元素挨着

浮动（float）

• 浮动定位是指
• 将元素排除在普通流定位之外，即元素将脱离标准文档流
• 元素将不在页面占用空间
• 将浮动元素放置在包含框的左边或右边
• 浮动依旧位于包含框之内
• 浮动的框可以向左或向右移动，直到它的边缘碰到包含框或另一个浮动框的边框为止
  HTML文档
  <div id="d_big">
  <div id="d1">我是div1</div>
  <div id="d2">我是div2</div>
  <div id="d3">我是div3</div>
  </div>
  CSS样式：
  #d_big{
  border:1px solid black;
  width:400px;
  height:400px;
  }
  #d1{
  width:50px;
  height:50px;
  background:red;
  }
  #d2{
  width:100px;
  height:100px;
  background:blue;
  }
  #d3{
  width:150px;
  height:150px;
  background:green;
  }

未浮动

float

CSS样式表
 #d1{
    float:left;
  }
   #d2{
    float:right;
  }
   #d1{
    float:left;
  }

clear

• clear属性用于清除浮动带来的影响
• clear：none/left/right/both;
• 定义了元素的哪边上不允许出现浮动元素
  举例说明：
  CSS样式
  #d1{float:left;} #d2{float:none;} #d3{float:none;}

未消除float影响

  CSS样式
  #d1{float:left;}   #d2{clear:both;float:none;} #d3{float:none;}

消除float影响

有一个问题：

div1进行了左浮动，div2没有进行浮动。dvi1进行左浮动不是不占空间吗？为什么div2中文字“我是div2”被div1挤到边框外呢？

进行了左右浮动的元素随脱离了普通文档流，不占用空间。但还是会占用文字域。

如果我们就想让div2中的文字区域不被div1占用，该怎么处理？

这时候绝对定位和相对定位可以派上用场了

     CSS样式表：
    #d_big{
           position:relative;
      }
    #d1{
           position:absolute;
           top:0px;
           left:0px;
      }

positon-1

overflow

• 使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素，那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景，这个问题会很难被注意到，但是这是一个很重要的问题。

overflow-1

  CSS样式 
   d_big{
  border:1px solid black;
        /*width:400px;
          height:400px;*/
  }
  #d1{float:left;}   #d2{float:left;} #d3{float:left;}

overflow

怎么清除这种影响呢？

   CSS样式
   #d_big{
            overflow:hidden;
  }

overflow-2