float

1、对于BFC中的块级元素（特指display: block）而言，即float元素会感知到其前面块级元素，但块级元素感知不到float元素的存在，即float元素不影响块级元素的布局。

2、对于BFC中的inline或者inline-block元素而言，float元素是感知不到到inline与inline-block元素存在的，但行内元素能感知到float元素的存在，即float元素会影响到后面行内元素的布局。

3、当float元素高度为0时，其水平方向上的margin,padding属性会失去作用。对于这点我是这样理解的：

       设置float浮动的元素自动获取display: block样式。对于display：block元素，当其高度为0时，其水平方向上的margin，padding属性也不会起作用。需要注意的是当块级正常流元素的高度为auto，而且只有块级子元素时，其默认高度为从最高块级子元素的外边框边界到最低块级子元素外边界之间的距离（参考《CSS权威指南》P180）。

 1、内联元素元素与float元素

    <div style=‘border: solid 1px black;height: 150px;’>
      <div style=‘display: inline-block;；border: solid 1px green; height: 20px;’>
        表示我在float的前面
      </div>
      <div style=‘float: left；border: solid 1px green; height: 20px;’>
        我是float元素
      </div>
      <div style=‘display: inline-block;: solid 1px green; height: 20px;’>
        表示我在float的后面
      </div>
    </div>

可以看到两个inline-block元素不会影响float元素，但float元素会影响inline-block元素。

 2、block元素与float元素

    <div style=‘border: solid 1px black;height: 150px;’>
      <div style=‘border: solid 1px green; height: 20px;’>
        表示我在float的前面
      </div>
      <div style=‘float: left；border: solid 1px green; height: 20px;’>
        我是float元素
      </div>
      <div style=‘border: solid 1px green; height: 20px;’>
        表示我在float的后面
      </div>
    </div>

可以看到两个block元素不会受float元素的影响，但是float元素会受block元素的影响。

3、float元素高度为0

    <div style=“border: solid 1px red”>
      <p style=“margin-right: 100px;padding-right: 100px;float:left”>I am P element</p>
      <span style="background: pink">I am span flowing the p element</span>
    </div>

虽然为float元素设置了margin-right: 100px;padding-right: 100px; 但是float元素还是被无情地忽略了，他在父元素中没有实际占有位置。