清除浮动

wxhnxcjdr

于 2019-09-29 14:24:57 发布

阅读量98

点赞数 1

分类专栏： CSS 文章标签： CSS 完整代码清除浮动

原文链接：https://blog.csdn.net/h_qingyi/article/details/81269667

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一次发文，简单粗暴，直接上代码，
借鉴的这位大佬的博客： https://blog.csdn.net/h_qingyi/article/details/81269667

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/floatClear.css">
    <title>floatClear</title>
</head>

<body>
<p>
    <span style="color:red;">子div </span>
    (margin:10px; border:5px;)
</p>
<p> 绿色边框为
    <span style="color:red;">父div</span>
    (padding:10px; border:5px;)
    <span style="color:red;">↓</span></p>
<div class="father clearfix">
    <div class="big">big</div>
    <div class="small">small</div>
    <!--<div class="other">extra</div>&lt;!&ndash;方法 1、额外div&ndash;&gt;-->
</div>

</body>
</html>

floatClear.css：

.father{
    padding:10px;
    border:5px solid greenyellow;
    /*方法 2、给父级标签添加overflow属性*/
    /*overflow: hidden;*/
    /*优点：代码简洁*/
    /*缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素*/
    /*不推荐使用*/
}

.big{
    margin:10px;
    float:left;
    width:100px;
    height:100px;
    border:5px solid black;
}

.small{
    margin:10px;
    float:left;
    width:50px;
    height:50px;
    border:5px solid blueviolet;
}

/*方法 1、额外标签法*/
/*优点：通俗易懂，方便*/
/*缺点：添加无意义标签，语义化差*/
/*不建议使用。*/
/*.other{*/
    /*margin:10px;*/
    /*width:200px;*/
    /*height:20px;*/
    /*border:1px solid red;*/
    /*clear: both;*/
/*}*/


/*方法 3、使用after伪元素清除浮动，给父元素添加clearfix属性*/
/*优点：符合闭合浮动思想，结构语义化正确*/
/*缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.*/
/*推荐使用*/
/*.clearfix:after{!*伪元素是行内元素 正常浏览器清除浮动方法*!*/
    /*content:"";*/
    /*display: block;*/
    /*height:0;*/
    /*clear:both;*/
    /*visibility: hidden;*/
/*}*/

/*方法 4、使用after和before双伪元素清除浮动*/
/*优点：代码更简洁*/
/*缺点：用zoom:1触发hasLayout.*/
/*推荐使用*/
/*.clearfix:after,.clearfix:before{*/
    /*content: "";*/
    /*display: table;*/
/*}*/
/*.clearfix:after{*/
    /*clear: both;*/
/*}*/
/*.clearfix{*/
    /**zoom: 1;*/
/*}*/