float定位对内联元素和块状元素的影响

写在前面：附一篇w3s的关于css float的讲解：http://www.w3school.com.cn/css/css_positioning_floating.asp

float属性还没有彻底了解，因为遇到了float之后会导致width自适应最小化的问题，然后又偶然发现float的内联元素可以自己设置宽高，内外边距等属性了。

一、对于内联元素float之后的改变，找到的解释为：（链接：http://blog.csdn.net/forest_fire/article/details/50944864）

当该属性( display )不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。float在绝对定位和display为none时不会被应用。对应的脚本特性为stylefloat（ie）或cssfloat（非ie）。(注意这里为stylefloat或cssfloat，而不是float)

因为只有块元素才会有物理属性，在css世界里边，有三种形态的东西，

1. 块元素。　特性：有物理属性，width,height写值起作用，而且要占据一行。
2. 内联元素。 特性：没有物理属性。但是margin，padding值有用。不占据一行，后边可以有兄弟元素。
3. 即是块又是内联，根据兄弟兄弟元素决定。

为什么是float之后才会有物理属性，这就是块与内联元素相互转化的问题。
块元素 -> 内联元素：　display:inline;
内联元素 -> 块元素：　display:block;

float就是隐性的把内联元素转化为块元素，这是对内部的特性就是有物理特性，但是他不占据一行。对外是内联元素的属性。他有个坏处就是会影响兄弟元素。相当于：display:inline-block;
那为什么不直接display:inline-block;因为这个玩艺在ie6下有几个px的bug。

二、对于块元素float之后的改变（其实和内联元素一样，相当于变成了：inline-block元素，最明显的是宽度自适应发生了变化）

原文链接：https://my.oschina.net/jing31/blog/6601     

一直以为float属性不会对div的宽度或高度有什么影响.但是,这两天我发 现在float对div宽度的影响是显著的.

首先div的默认宽度是width:auto;意思是自动调整宽度.
在不带float的情况下,div的宽度会自动调整至最大化,而在带float的情况下则正好相反,它会自动调整至最小化.
测试如下:

<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#ff0000; float:left;">sss</div>

这个可能是为了clear而设定

第二div的默认高度也是height:auto.带不带float的div都一样,都是自动调整至最小化

第三div带float时,只要宽度不超过网页宽度,则其它元素包括div都要环绕它.或者也可以认为此时的带float的div是一个特殊的 padding
测试如下:

<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#ff0000; float:left;">sss</div>
<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#ff0000; float:left; width:100%;">sss</div>
<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#ff0000; float:left; width:100px; height:50px;">sss</div>
ssssssssssssss<br />sssssssssssssssss<br/> ssssssssssssss

从以上你或者已经知道了一个重要的div+css的布局方法: 
左右分开的网页,左侧的宽度固定,右侧的宽度随分辨率自动适应,并占满右侧的空间. 
方法就是左侧的div用float:left.而右侧的div不带float.这样就可以实现这个效果了；代码如下所示：

<div class="a">
        <!-- 两列布局，左侧div宽度固定，右侧自适应 -->
        <div class="b"></div>
        <div class="c"></div>
 </div>
 *{
        margin:0px;
        padding:0px;
      }
      html,body{
        width: 100%;
        height: 100%;
      }
      .a{
          background-color: lightyellow;
      }
      .b{
        width: 100px;
        height:100px;
        float:left;
        background-color: #aaa;
      }
      .c{
        width:auto;   /*宽度自适应*/
        margin-left:100px;
        height: 200px;
        background-color: #ddd;
        height:100vh;  /*屏幕高度的100%*/
      }