清除浮动

最新推荐文章于 2025-06-02 17:01:47 发布

原创最新推荐文章于 2025-06-02 17:01:47 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#H5 #css样式 #布局

H5 专栏收录该内容

13 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #header{
            height: 100px;
            background-color: #cccccc;
        }
        #body{
            height: 500px;
            background-color: #ff7300;
        }
        #left{
            height: 90%;
            width: 15%;
            background-color: chartreuse;
            float: left;
        }
        #center{
            height: 90%;
            width: 70%;
            background-color: darkmagenta;
            float: left;
        }
        #right{
            height: 90%;
            width: 15%;
            background-color: fuchsia;
            float: left;
        }
        #buttom{
            height: 10%;
            background-color: red;
            clear: both;      这里是清除浮动
        }                
        #foot{
            height: 100px;
            background-color: aqua;
        }
    </style>
    <title>float浮动的消除</title>
</head>
<body>
<div>
    <div id="header"></div>
    <div id="body">
        <div id="left">轻轻河边草</div>
        <div id="center"></div>
        <div id="right"></div>
        <div id="buttom">jshdahkad</div>
    </div>
    <div id="foot"></div>
</div>
</body>
</html>

以下是没有标准流  清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .clearfix:after{
            content: "";
            display: table;
            clear: both;
        }                       这是就是清楚浮动的代码  用伪类选择器
        #body{
            height: 500px;
            background-color: #ff7300;
        }
        #left{
            height: 90%;
            width: 15%;
            background-color: chartreuse;
            float: left;
        }
        #center{
            height: 90%;
            width: 70%;
            background-color: darkmagenta;
            float: left;
        }
        #right{
            height: 90%;
            width: 15%;
            background-color: fuchsia;
            float: left;
        }
    </style>
    <title>float浮动的消除</title>
</head>
<body>
<div>
    <div id="body" class="clearfix">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</div>
</body>
</html>