围住浮动元素的三种方法-侠奕

1 
2 

3 
4 
图片标题
5 
6 
7 

 1 p{
 2 margin:0;
 3 }
 4 img{
 5 float:left;
 6 }
 7 section{
 8 border:1px solid green; 
 9 margin:0 0 10px 0;
10 }
11 footer{
12 background-color: #ccc;
13 }

1 section{
2 border:1px solid green; 
3 margin:0 0 10px 0;
4 overflow: hidden;
5 }

 1 section{
 2 border:1px solid green;
 3 margin:0 0 10px 0; 
 4 width:100%;
 5 float:left;
 6 }
 7 footer{
 8 background-color: #ccc;
 9 clear:left;
10 }

1 
2 

3 
4 
图片标题
5 

6 
7 
8 

1 div.clear{
2 clear:left;
3 }

1 

2 
3 
图片标题
4 
5  

1 .clearfix:after{
2 content:".";
3 display:block;
4 height:0;
5 visibility:hidden;
6 clear:both;
7 }