css浮动float和absolute详解

浮动

1. 浮动的本意：让文字像流水一样环绕浮动元素
2. 浮动的使用：最好不要用来布局，使文字环绕图片
3. 特性：包裹性和高度欺骗性

特性一： 包裹性

  <div style="border: 4px solid blue; ">
    <img src = './images/avator.jpg' style="height: 100px;"/>
  </div>
  <div style="border: 4px solid red; float: left;">
    <img src="./images/avator1.jpg" alt="" style="height: 100px;">
  </div>
  //图片太大，所以设置了height

以上代码效果：

block元素不指定width的话，默认是100%，一旦让该div浮动起来，立刻会像inline元素一样产生包裹性，宽度会随内容自适应 这也是通常float需要手动指定width的原因）
再加一个div效果如下

 <div style="border: 4px solid blue; ">
    <img src = './images/avator.jpg' style="height: 100px;"/>
  </div>
  <div style="border: 4px solid red; float: left;">
    <img src="./images/avator1.jpg" alt="" style="height: 100px;">
  </div>
  <div style="border: 4px solid green;">
    <img src="./images/avator2.jpg" height="100px"/>
  </div>

效果非常近似于display：inline-block。但相比之下，浮动能设定左浮和右浮，但display：inline-block都是从左向右排列。（还有些细微差别，两个display：inline-block间会有空隙，但两个float没有）

特性二：高度欺骗

代码如下：

<div style="border: 4px solid blue; ">
    <img src = './images/avator.jpg' style="height: 100px;"/>
    <p>没有添加float的文本</p>
  </div>
  <div style="border: 4px solid red; ">
    <img src="./images/avator1.jpg" alt="" style="height: 100px;float: left;">
    <p>添加了float的文本</p>
  </div>
  //以上区别的是给img标签有无添加浮动

未给img标签添加float元素的时候，包裹img和p标签的div盒子的高度为他们的高度之和（不是准确的和，有重叠的部分）

给img标签加了float元素的时候，包裹img和p标签的div盒子的高度为p标签占据的高度

 <div style="border: 4px solid blue; ">
    <img src = './images/avator.jpg' style="height: 100px;"/>
    <p>没有添加float的文本</p>
  </div>
  <div style="border: 4px solid red; ">
    <img src="./images/avator1.jpg" alt="" style="height: 100px;float: left;">
    <p style="float:left;">添加了float的文本</p>
    <a>测试</a>

以上给img和p标签都添加了float属性，此时包裹他们的div的高度为a标签的高度

总结：以上结构中，div的高度由它里面包含的内容的高度撑开，当里面的内容添加了float属性后，它的父元素在计算高度的时候，会忽略添加了float属性的元素。而添加了float属性的元素本身高度依然存在

清除浮动

清除浮动的意义：即使给子元素添加了float属性，他的父元素在计算高度时依然能够获取到该元素的高度，也就是解决高度塌陷问题。

关于清除浮动可查看文章：css float浮动的深入研究

以上参考资料：
css浮动float详解
css浮动（float、clear）通俗讲解