CodeLab
Show Output
 
xxxxxxxxxx
38
 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="utf-8">
5
<title>Example of clearing floats</title>
6
<style>
7
    .container{
8
        background: yellow;
9
        border: 1px solid #c4884d;      
10
    }
11
    .clearfix {
12
        clear: both;
13
        visibility: hidden;
14
        height: 0;
15
    }
16
    p {
17
        width: 200px;        
18
        margin: 10px;
19
        padding: 10px;
20
    }
21
    .red {
22
        float: left;       
23
        background: #ff0000;
24
    }
25
    .green {
26
        float: right;
27
        background: #00ff00;
28
    }
29
</style>
30
</head>
31
<body>
32
    <div class="container">
33
        <p class="red">Floated to left.</p>
34
        <p class="green">Floated to right.</p>
35
        <div class="clearfix">&nbsp;</div>
36
    </div>
37
</body>
38
</html>  
 

在微博、微信、公众号、小程序分享此示例。 如果您觉得有帮助,请给我们一个赞。