一.认识浮动
任何元素都可以使用浮动，无论是块级元素（类似div，ul）还是行内元素都可以浮动，任河北省名float的元素都会自动按被设置成块级元素，拥有了块级元素的特点，比如可以设置宽高，还可以设置内边距。
当元素对象设置了float以后，它将不再独自占据一行。浮动块可以向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。
但是还有一点比较重要，float浮动用于布局，可以很轻松达到靠左或者靠右的效果，但是当用完float浮动以后，一定要清除浮动，不然很有可能造成浮动塌陷。
二.那么什么是浮动塌陷呢？
我们首先要知道，在浮动布局中父元素的高度默认是被子元素撑开的。当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑开父元素的高度，导致父元素的高度丢失，高度丢失以后，其下的元素会自动上移，导致页面混乱。
举个问题示例
假如一个父元素包含了几个子元素，此时给这几个子元素都设置了浮动（float：left）那么父元素的高度就会为0。
像下面图片这样：
【没有浮动】
【浮动后】
像上面图片那样，因为加入了浮动，使得图片脱离文档流，div包不住img，同时img加入了浮动，使得div无法被img支撑，导致div高度塌陷，这样就是浮动塌陷。
浮动塌陷的解决办法
清除浮动，下面是清除浮动的4种方式：
在使用float元素父元素之后添加一个高度为0，宽度为0，并且有clear:both样式的div。
<div style="clear: both;"></div>给在使用float元素的父元素添加隐藏。
不建议用，添加以后超出文字或者图片会被隐藏起来。
style="overflow: hidden;"给在使用float元素的父元素设置高度。
不建议用，因为比较固定如果后面需要添加元素的话比较受限。
style="height: 320px;"使用after伪对象清除浮动。
推荐首选，比较方便同时解决了上述问题。
.父级名称或标签::after{
/* after默认是行内元素，需要修改为块元素 */
content: ' '; //在clear类后面添加内容为空
display: block; //把添加的内容转化为块元素
clear: both; //清除这个元素两边的浮动
}代码示例：
<!-- HTML部分，添加 clearfix -->
<div class="container clearfix">
<div class="item">1</div>
<div class="item">2</div>
</div>/* CSS部分 */
.clearfix:after {
content: " ";
display: block;
clear: both;
}此外还会遇到外边距重叠的问题
三. 那么什么是外边距重叠呢？
问题示例：
container 之中包含一个 item 子元素，代码如下
<div class="container">
<div class="item">
item
</div>
</div>
此时，我给 item 加了 margin-top: 30px ，本来这时候我期待的结果是，item 块本身应该距离 container 青色区域的上边界 30px 。同时一个副作用是青色区域应该拉高 30px 。但是实际上得到的却是下面的效果：
造成这个的原因是，父子元素的 margin-top 是会重叠的，即使是像上面的情况中，父元素 container 自身 margin-top 为 0 的情况下也一样。这样造成的一个现象就是父元素“包不住”子元素的 margin-top ，溢出了。类似的问题也会发生在 margin-bottom 身上。
外边距重叠解决办法
要给 container 添加 clearfix。
<!-- HTML部分 -->
<div class="container clearfix">
<div class="item"> item </div>
</div>/* CSS部分 */
.clearfix::before, //意为在类名为clearfix的最后面和前面添加下面的内容
.clearfix::after{
content: '';
display: table; //注意，display: table 换成 dispaly: block 是不行的。
clear: both;
}