HTML5第六课时，float浮动影响的消除，clear

最新推荐文章于 2023-04-20 17:54:27 发布

甲戌天火

最新推荐文章于 2023-04-20 17:54:27 发布

阅读量674

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_36872096/article/details/70246140

版权

HTML5 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>float浮动影响的清除，clear</title>
    <style>
        #header{
            height: 100px;
            background-color: #ff7300;
        }
        #body{
            height: 300px;
            background-color: #585858;
        }
        #foot{
            height: 100px;
            background-color: brown;
        }
        #left{
            height: 90%;
            width: 15%;
            background-color: #42668f;
            float: left;
        }
        #center{
            height: 90%;
            width: 70%;
            background-color: #4d2e83;
            float: left;
        }
        #right{
            height: 90%;
            width: 15%;
            background-color: #cccccc;
            float: left;
        }
        #bottom{
            height: 10%;
            background-color: yellow;
            clear: both;
            /*第一种方式：父容器里面有一个非浮动的元素，加一个clear
                将左右两边浮动的影响清除，clear:both;div才可以显示出来。
                原因是：其他div是浮动起来的，下方有空间，
                新的盒子会隐藏在浮动的div下面，但是内容不会受到影响，出现在应该出现的位置，
                加了clear才可以解决。*/
        }
        /*第二种方式：如果没有非浮动的元素，即没有bottom这个div，
            在样式里面加，也可以消除浮动的影响。
        .clearfix:after{
             content:"";
             display:table;
             clear:both;
        }
*/
    </style>
</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>