码迷,mamicode.com
首页 > Web开发 > 详细

CSS学习笔记一 如何清除浮动

时间:2015-10-30 14:03:49      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

<!<!DOCTYPE html>
<html lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximun-scale=1,user-scalable=no"> 
    <!--清除浮动
    方法一: .divcss5{border:1px solid #F00;background:#FF0;width:400px;}产生浮动
            .divcss5{border:1px solid #F00;background:#FF0;width:400px;height:102px;}清除浮动,给父级加高度:是子级内容+边框的高度。
            
    方法二:
            .clear{clear:both;}
            <div class="clear"></div> 
    
    方法三:.divcss5{border:1px solid #F00;background:#FF0;width:400px;overflow:hidden} 建议使用overflow:hidden,使父级紧贴其对象内容
    -->
    <style> 
        .divcss5{border:1px solid #F00;background:#FF0;width:400px;} 
        .divcss5-left,.divcss5-right{border:1px solid #00F;background:#FFF;width:180px;height:100px;} 
        .divcss5-left{float:left;}
        .divcss5-right{float:right;}
        
    </style>
    </head>
    <body>
        <div class="divcss5">
            <div class="divcss5-left"></div>
            <div class="divcss5-right"></div>  
        </div>
    </body>
</html>

 

CSS学习笔记一 如何清除浮动

标签:

原文地址:http://www.cnblogs.com/maojiayan/p/4922904.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!