一，浮动

    css3设计浮动的主要目的就是为了实现文本绕排图片的一个效果，浮动就是脱离文档流，原理紧跟后面的元素在空间允许的情况下，向上提升与浮动元素平起平坐。直到他碰到父元素

• 围住浮动元素的三种方法
      为什么要围住浮动元素呢?
  因为会有一种情况如下代码

 <div>
        <img src="./我都.jpg" alt="">
        <p>ss3设计浮动的主要目的就是为了实现文本绕排图片的一个效果，
        浮动就是脱离文档流，原理紧跟后面的元素在空间允许的情况下，向上提
        升与浮动元素平起平坐。直到他碰到父元素</p>
    </div>

    <footer>
        这是一些尾注,固定在页面底部
    </footer>

显示效果为

image.png

而现在我们就是想把p标签的内容提上去围绕图片形成图文并排的形式,而下面的footer还是在下面,所以我们就是要给图片一个浮动.

    img{
            float: left;
        }

float

这时我们发现这根本不是我们要的效果,我们不想把footer这个尾注提上去,而是固定在页面底部。

这是因为此时图片已经变成浮动了,而div此时高度也变成了文本的高度，而div中已经计算不到浮动元素的高度了，这种问题也叫父级高度塌陷。

这对我们的布局有很大影响，所以我们怎么解决这种问题呢
三种解决方法
1为父元素添加overflow：hidden;为防止包含元素内容超出范围
2同时浮动父元素,并将下面元素的清除左浮动
3第三种方法适用于如果没有父元素的情况下 怎么解决添加非浮动的清除元素
可以设置一个类名,然后把需要的元素进行统一设置
clearF

.clearF{
  content:" ";
  display:block;
  height:0;
  visibility:hidden;
  clear:both;
}