方法一、直接给父元素设置高度

• 优点：简单粗暴
• 缺点：某些布局中不适用。如：新闻列表、京东推荐模块，不适用设置高度

方法二、额外标签法

• 操作方法：

  • 在父元素内容的最后添加一个块级元素
  • 给添加的块级元素设置 clear:both

• 特点：会在页面中添加额外的标签，会让页面的HTML结构变的复杂

方法三、单伪元素清除法

• 操作方法：用伪元素替代了额外标签
• 特点：项目中使用，直接给标签加类即可清除浮动

    
    
    
    
    


    
"father clearfix">
        
"son">
    
    
"clearfix">
    
"clearfix">
    
"clearfix">
    
"clearfix">


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

方法四、双伪元素清除法

• 操作

    
    
    
    
    


    
"father clearfix">
        
"son">
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

• 优点：项目中使用，直接给标签加类即可清除浮动

方法五、给父元素设置overflow : hidden

• 操作：直接给父元素设置 overflow : hidden
• 优点：方便

    
    
    
    
    


    
"father">
        
"son">
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28