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

<!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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容