Neworld

浮动带来的问题以及解决方法
知识点浮动带来的问题:可能会影响后面的布局以及解决方法:用完浮动后,清除浮动示例浮动示例去掉main部分的高度限制...
扫描右侧二维码阅读全文
28
2019/04

浮动带来的问题以及解决方法

知识点

浮动带来的问题:可能会影响后面的布局

以及解决方法:用完浮动后,清除浮动

示例

浮动示例

chrome_l2NlYZ2b5j.png

去掉main部分的高度限制

chrome_DsdOAjuk9K.png

原因

chrome_I66vtB5AOd.png

chrome_odE43YMuLS.png

解决方法:用了float后,去掉float

chrome_XCmOuvWqYf.png

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .header{
                height: 60px;
                background-color: black;
            }
            .main{
                /* height: 800px; */
                background-color: gray;
            }
            
            .left{
                height: 500px;
                width: 65%;
                background-color: green;
                float: left;
            }
            .right{
                height: 700px;
                width: 30%;
                background-color: orange;
                /* float */
                float: right;
            }
            
        .footer{
            height: 50px;
            /* background-color: black; */
            background-color: red;
            color: white;
            /* 居中 */
            text-align: center;
            font-size: 40px;
        }
        /* 清除浮动 */
        .clear{
            clear: both;
        }
            
            
        </style>
    </head>
    <body>
        <!-- 网页头部 -->
        <div class="header"></div>
        <!-- 网页主体内容  高度800px-->
        <!-- 需要自适应高度 高度不固定 -->
        <!-- 但会导致底部footer 往上跑 -->
        <div class="main">
            <!-- 网页左边部分 -->
            <div class="left"></div>
            <!-- 网页左边部分 -->
            <div class="right"></div>
            <!-- 清除浮动 -->
            <div class="clear"></div>
        </div>
        <!-- 网页的底部 -->
        <div class="footer">这里是网页脚部</div>
        
        
    </body>
</html>
文章名: 《浮动带来的问题以及解决方法》

本文链接:https://www.neworld.studio/721.html

除特别注明外,文章均由 Neworld 原创

 原创文章 转载时请注明 出处 以及文章链接
最后修改:2019 年 04 月 28 日 11 : 00 PM

发表评论