首页手记 CSS3清除浮动6种方法集合

CSS3清除浮动6种方法集合

标签：

CSS3

一、浮动产生原因
一般浮动是什么情况呢？一般是一个盒子里使用了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>

点击查看更多内容