float浮动的消除1

最新推荐文章于 2023-04-20 17:54:27 发布

ztt0918

最新推荐文章于 2023-04-20 17:54:27 发布

阅读量279

点赞数

分类专栏： float浮动的消除1 文章标签： float浮动的消除1

本文链接：https://blog.csdn.net/ztt0918/article/details/70228586

版权

float浮动的消除1 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float浮动的消除</title>
    <style>
        #header{
            height: 100px;
            background-color: darksalmon;
        }
        #body{

            background-color: black;

        }

        #left{
            width: 15%;
            height: 280px;
            background-color: #cccccc;
            float: left;
        }
        #center{
            width: 70%;
            height:280px;
            background-color: red;
            float: left;

        }
        #right{
            width: 15%;
            height: 280px;
            background-color: blue;
            float: left;
        }

        .clearfix:after{
            content: "";
            display: table;
            clear: both;
        }
        #foot{
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div>
    <div id="header"></div>
    <div id="body" class="clearfix">
        <div id="left">你若无伤，岁月无恙。</div>
        <div id="center">你若无伤，岁月无恙。</div>
        <div id="right">你若无伤，岁月无恙。</div>

    </div>
    <div id="foot"></div>
</div>
</body>
</html>

若去除

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

ztt0918

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录