一,对父盒子设置高度
二,在父盒子中加一个空盒子,设置clear:both;
三,伪元素清除法
.clearfix:after{
content:"."; /*内容就是一个英文.*/
display:block; /*加入的这个元素转化为块级元素*/
clear: both; /*清除左右两边的浮动*/
}
四,设置overflow: hidden;
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container{
border:1px solid red;
/*overflow: hidden;*/
/*
所以，这是消除浮动的第二种方法
给包含浮动元素的父标签添加css属性
overflow:auto;
下面我们来回顾下overflow这个属性：
overflow这个属性规定内容溢出元素框时发生的事情
scroll：内容会被修剪，但浏览器会显示滚动条来查看其余内容
visible：默认值，内容不会修剪，会呈现在元素框之外
hidden：内容会被修剪，其余内容不可见
auto：如果内容被修剪，则浏览器会显示滚动条来查看
inherit：规定从父元素继承overflow属性的值
缺点：overflow如果不设置为默认值visible
会带来对布局等等很多副作用。。
（- 没有深入了解
*/
}
img{
100px;
height: 100px;
float: left;
}
p{
float: left;
}
.clear{
clear: both;
}
.clearfix:after{
content:"."; /*内容就是一个英文.*/
display:block; /*加入的这个元素转化为块级元素*/
clear: both; /*清除左右两边的浮动*/
}
/*
在这里我们回顾下伪类：
:after 选择器在被选元素的内容后面插入内容
:before 选择器在备选元素的前面插入内容
p:after{
content:"liuyixiang";
background-color:yellow;
}
在每个p元素后面插入内容，并设置插入内容的样式
这里是在p元素后面加了liuyixiang 背景颜色红色
*/
}
.clearfix{*zoom:1;} /*兼容ie6/7*/
.clearfix{display: inline-block;}/*兼容ie/mac*/
/*
所以，消除浮动的第三种方式
after伪元素实现
父元素上使用after伪元素来新加一个内容
：after伪元素内容是一个点，本身用来清楚浮动
其它代码则是为了让这个伪元素不可见
这个方法还是比较常见的
*/
</style>
</head>
<body>
<div class="container clearfix">
<img src="a.jpg" />
<p>one</p>
<!--<div class="clear"></div>-->
<!--
所以清除浮动的第一种方法就是
使用空标签清楚浮动
在所有浮动标签后面添加一个空标签并定义css属性
clear：both;
缺点：增加了无语义标签
-->
</div>
</body>
</html>