CSS中浮动和清除浮动的用法

作者: brafei | 来源:发表于2019-06-11 22:14 被阅读0次

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{ margin: 0; padding: 0}
        .left{ float: left;}
        .clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }                                                             //伪类清除
        .clearfix { zoom:1; }    
        .clearit { clear:both; height:0; font-size:0; overflow:hidden; }  //设置class名清除
        .main{ width: 1000px; background: blue;}
        .myRight,.myLeft{ width: 200px; height: 200px; background: #ddd;}
        .myRight{ background: red}
    </style>
</head>
<body>
    <div class="main clearfix">
        <div class="myLeft left">左侧</div>
        <div class="myRight left">右侧</div> 
    </div>

    <div class="footer">
        <p>我是底部</p>
    </div>
</body>
</html>