清除浮动布局案例-优快云博客

本文链接：https://blog.youkuaiyun.com/ztt0918/article/details/70229066

<!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>