HTML中清除浮动带来的影响

来源：互联网发布：阿里云虚拟主机能装ss 编辑：程序博客网时间：2024/05/22 13:19

清除浮动带来的影响有两种方法：

1、利用clear属性

2、利用after伪类

举例说明：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        #header{            height: 100px;            background-color: red;        }        #body{            /*height: 300px;*/            background-color: yellow;        }        #left{            height: 280px;            width: 15%;            background-color: #4cae4c;            float: left;        }        #center{            height: 280px;            width: 70%;            background-color: #3c763d;            float: left;        }        #right{            height: 280px;            width: 10%;            background-color: green;            float: left;        }        #bottom{            height: 10%;            background-color: #ffceb6;            /*清除浮动元素带来的影响*/            clear: both;        }        /*清除浮动的方式二：利用伪类after*/        .clearfix:after{            content: "";            display: table;            clear: both;        }        #foot{            height: 100px;            background-color: #2e6da4;        }    </style>    <title>Float浮动</title></head><body><div>    <div id="header"></div>    <div id="body" class="clearfix">        <div id="left">左侧div</div>        <div id="center">中间div</div>        <div id="right">右侧div</div>       <!-- <div id="bottom">底部div</div>-->    </div>    <div id="foot"></div></div></body></html>

0 0