html中清除浮动（float）带来的影响

来源：互联网发布：911zyz资源网新域名编辑：程序博客网时间：2024/05/16 03:56

在要清除浮动的标签中添加清除浮动的方法：

示例代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        .cleanfix :after{  //清除浮动带来的影响            content: "";            display: table;            clear: both;        }        #left,#left2,#center,#right{            float: left;        }        #top1,#top2{            float: left;        }        #left{            width: 20%;            height: 300px;            background-color: red;        }        #left2{            width: 20%;            height: 300px;            background-color: #91DB4B;        }        #left21{            width: 100%;            height: 50%;            background-color: #F2AD0A;        }        #left22{            width: 100%;            height: 50%;            background-color: #42668F;        }        #center{            width: 20%;            height: 300px;            background-color: #F2BB6F;        }        #right{            width: 40%;            height: 300px;            background-color: aqua;        }        #top{            width: 100%;            height: 50%;            background-color: #FF6600;        }        #bottom{            width: 100%;            height: 50%;            background-color: chartreuse;        }        #top1{            width: 50%;            height: 100%;            background-color: blue;        }        #top2{            width: 50%;            height: 100%;            background-color: blanchedalmond;        }    </style>    <title>页面作业</title></head><body><div class="cleanfix" ><!--清除浮动-->    <div id="left"></div>    <div id="left2">        <div id="left21"></div>        <div id="left22"></div>    </div>    <div id="center"></div>    <div id="right">        <div id="top" class="cleanfix">            <div id="top1"></div>            <div id="top2"></div>        </div>        <div id="bottom"></div>    </div></div></body></html>

阅读全文

1 0