一，浮动
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;
}
