清除浮动的应用clearfix

时间：2018-01-21 21:35:50 阅读：176 评论：0 收藏：0 [点我收藏+]

标签：opened bsp img 实现 magent htm view after tle

清除浮动

<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{
            width: 100%;
            /*height: 80px;*/

            background-color: #53868B;
        }

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

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

        .header .item3{
            width: 60px;
            height: 50px;
            background-color: goldenrod;
            float: right;
        }
        .content{
            width: 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

清除浮动的应用clearfix

标签：opened bsp img 实现 magent htm view after tle

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行