float属性对布局的影响

  <!-- float 对布局的影响 -->
  <!-- 当不设置设置第二个div的float为left时，就像第一个
      div不存在一样，但是显示的时候要受到第一个div的影响
   -->
    <div id="d1" style="border: 1px solid blue;">
        <div style="float:left;height: 10px z-index: 100">11</div>
        <div style="float:left;border: 1px solid black;background-color: red">
            <div style="font-size: 24px;">22</div>
            <div>22</div>
            <div>22</div>
            <div>22</div>
            <div>22</div>
            <div>22</div>
            <div>22</div>
        </div>
        <div style="clear: both">
        333</div>
    </div>
    <p >
    <!-- float 对border的影响 -->
    <!-- 当设置第三、四个div的float属性为float时，在页面显示上IE和FireFox会有区别 -->
    <!-- IE下，这两个div会包括在border之内 -->
    <!-- FireFox下，这两个div不会包括在border之内 -->
        <div id="d2" style="clear: both;border-bottom: 1px solid yellow; width: 400px">
            <div>11</div>
            <div>
                <div>22</div>
                <div>22</div>
                <div>22</div>
                <div>22</div>
                <div>22</div>
                <div>22</div>
                <div>22</div>
            </div>
            <div style="float: left;width: 150px" >
            333</div>
            <div style="float: left;width: 150px" >
            444</div>
        </div>
       <p>
          <!-- margin 0px auto 对居中的影响 --> 
          <!-- 上下页面空白为 0px, 左右页面空白自适应并且相等,可以达到横向居中的效果 -->
          <!-- 此属性在IE浏览器下无用，要使居中 需要设置 text-align: center; -->
          <!-- 在Firefox下，直接使用即可 -->
          <div id="d3" style="clear: both;border: 1px solid black; text-align: center;">
            <div id="d4s" style="width:100;height:100;margin:0px auto">margin 0px auto 对居中的影响</div>
       </div>

       子元素在将floating属性设置为left时，会脱离父节点的束缚，这时候将父节点的float也设置为left，就可以了