css浮动效果

• 释义
  何为浮动，浮动及是不固定位置的一种布局方式，添加了浮动效果的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
  

  来w3c的盗图
  image.png
  
  
  image.png
  
  
  image.png

• 清除浮动效果
  1.我们可以使用 clear 属性来清除浮动效果

2.使用overlfow属性方法可以通过触发BFC的方式来清除浮动效果

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

此方法经验证并不能清除浮动，也许是用法不对，存疑，待议。
3.使用before和after 双伪元素来清除浮动效果

    div:after{
        content: "";
        display: block;
        clear: both;
    }

经测试效果貌似并不好，存疑，待议。