HTML中清除浮動帶來的影響

枕夢發表於2017-04-22
HTML

清除浮動帶來的影響有兩種方法：

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>

相關文章