css中float浮动的消除

来源：互联网发布：java notify wait原理编辑：程序博客网时间：2024/05/16 07:39
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>float浮动的消除</title>    <style>        #header{            height: 100px;            background-color: yellow;        }        #body{            height: 300px;            background-color: green;        }        .clearfix:after{            content: "";            display: table;            clear: both;        }        #left{            height: 90%;            width: 15%;            background-color: #FF6500;            float: left;        }        #center{            height: 90%;            width: 70%;            background-color: blueviolet;            float: left;        }        #right{            height: 90%;            width: 15%;            background-color: aquamarine;            float: left;        }        #bottom{            height: 50px;            background-color: red;            clear: both;        }        #foot{            height: 100px;            background-color: blue;        }    </style></head><body><div>    <div id="header"></div>    <div id="body" class="clearfix">        <!-- 当父元素中没有任何非浮动元素 使用clearbox                                          相当于在底部加id为bottom的div-->        <div id="left"></div>        <div id="center"></div>        <div id="right"></div>        <!--<div id="bottom">我是底部div</div>-->    </div>    <div id="foot"></div></div></body></html>
0 0