清除浮动的应用clearfix

清除浮动

<div class="header clearfix">
    div1
    <div class="item1">div11</div>
    <div class="item2">div12</div>
    <div class="item3">div13</div>
</div>


<div class="content">div2</div>

div1、div2是两个div，div11、div12、div13是div1的子div，div11、div12左浮动，div13又浮动，如下图

清除浮动，使div2和div1的最底部平行，就像下面：

实现方法：

在div1中加入clearfix：

.clearfix:after{
            content: "";
            display: block;
            clear: both;
        }

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        *{
            margin: 0;
        }
        .header{
             100%;
            /*height: 80px;*/

            background-color: #53868B;
        }

        .header .item1,.header .item2{
             60px;
            height: 80px;
            background-color: goldenrod;
            float: left;
        }

        .item2{
            background-color: green!important;
        }

        .header .item3{
             60px;
            height: 50px;
            background-color: goldenrod;
            float: right;
        }
        .content{
             100%;
            height: 300px;
            background-color: darkmagenta;
        }

        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }

    </style>

</head>
<body>


<div class="header clearfix">
    div1
    <div class="item1">div11</div>
    <div class="item2">div12</div>
    <div class="item3">div13</div>
</div>


<div class="content">div2</div>


</body>
</html>

View Code

相关阅读:
块级元素与行级元素（内联元素）
css中属性值继承小解
form表单
html，xhtml和xml
html中的标签分类
如何把HTML标记分类
实现对HashMap的value排序
装饰者模式
实现一个简单的二叉树容器，并且实现中序、先序、后续遍历
Java中java.util.concurrent包下的4中线程池代码示例

原文地址：https://www.cnblogs.com/litzhiai/p/8325367.html