float浮动的消除2

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

原创最新推荐文章于 2023-04-20 17:54:27 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#float浮动的消除

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

1 篇文章

订阅专栏

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

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

        }
        #right{
            width: 15%;
            height: 90%;
            background-color: blue;
            float: left;
        }
        #bottom{
            height: 10%;
            background-color: yellow;
            /*清除浮动元素带来的影响：
               给最后一个非浮动元素添加 clear: both;*/
            clear: both;
         }
        #foot{
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div>
    <div id="header"></div>
    <div id="body">
        <div id="left">你若无伤，岁月无恙。</div>
        <div id="center">你若无伤，岁月无恙。</div>
        <div id="right">你若无伤，岁月无恙。</div>
        <div id="bottom">你若无伤，岁月无恙。</div>
    </div>
    <div id="foot"></div>
</div>
</body>
</html>