继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CSS3清除浮动6种方法集合

Freya0_0
关注TA
已关注
手记 34
粉丝 71
获赞 639

一、浮动产生原因
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。
图片描述
本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了。
简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。
二、浮动产生负作用

1、背景不能显示
由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。
2、边框不能撑开
如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .divcss{
            width:400px;
            border:1px solid red;
            background:#FF0;
            /*!*height: 150px;*! 方法1:设置父元素的高度*/
            /*!*float: left;*! 方法2: 父元素浮动*/
            /*overflow: hidden;  方法3:父元素设置overflow: hidden*/
            /*!*position: absolute;*!  方法6:父元素绝对定位脱离文档流*/
        }
        .divcss-left,.divcss-right{
            width:180px;
            height:100px;
            border:1px solid #00F;
            background:#FFF}
        .divcss-left{
            float:left
        }
        .divcss-right{
            float:right
        }
        /*.clerrfix{*/
            /*!*clear: both; *!  方法4:在父元素内部,子元素后面设置清除浮动*/
        /*}*/
        /*.clearfix:after{*/
            /*content: '';*/
            /*display: block;*/
            /*clear: both;*/
        /*}*/
        /*.clearfix{*/
            /*!*zoom: 1;*!  兼容ie*/
        /*!*}*!
                        方法5:用after*/

        /*.clearfix:after{*/
            /*content: '';*/
            /*display: block;*/
            /*clear: both;*/
            /*height: 0;*/
            /*visibility: hidden;*/
        /*}*/
        /*新浪*/

    </style>
</head>
<body>
<div class="divcss clearfix">   <!--方法5:用after-->
    <div class="divcss-left">left浮动</div>
    <div class="divcss-right">right浮动</div>
    <!--<div class="clerrfix"></div> --><!--方法4:在父元素内部,子元素后面设置清除浮动-->
</div>
</body>
</html>
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP