HTML+CSS设置div .main_right中的float:left无效

问题描述：

<!DOCTYPE html>
<html style="background-image: url(./img/bg.png);">
    <head>
        <meta charset="utf-8" />
        <title>This is my first</title>
        <style>
            * {
                margin: 0;
                font-family: "微软雅黑";
                transition:0.5s;
                -webkit-font-smoothing: antialiased;
            }
            .header {
                width: 100%;
                height: 70px;
                background-color: white;
                position: fixed;
                top: 0;
                box-shadow:3px 1px 2px darkgrey;
            }
            .header:hover {
                box-shadow:3px 1px 2px #000;
            }
            .header a {
                line-height: 70px;
                margin: 85px;
                color: black;
                text-decoration: none;
                padding: 15px;
                font-size: 16px;
                text-shadow: 0 1px 1px #fff;
            }
            .header a:hover {
                background-color: black;
                color: white;
            }
            .left {
                width: 5px;
                height: 700px;
                background-color: #A9A9A9;
                position: fixed;
                left: 0;
                overflow: auto;
                text-align: center;
            }
            .left:hover {
                background-color: white;
                width: 200px;
                box-shadow:3px 1px 2px darkgrey;
                border-top-width: 1px;
                border-top-style: solid;
                border-top-color: aqua;
            }
            .left a {
                color: #A9A9A9;
                text-decoration: none;
            }
            .main_left {
                margin: 80px;
                background-color: white;
                width: 70%;
                height: 700px;
                border-top-width: 1px;
                border-top-style: solid;
                border-top-color: aqua;
                border-bottom-width: 1px;
                border-bottom-style: solid;
                border-bottom-color: aqua;
            }
            .main_left:hover {
                box-shadow:3px 1px 2px darkgrey;
            }
            .main_right {
                background-color: white;
                height: 200px;
                width: 20%;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <a href="#">主页</a>
            <a href="#">博客中心</a>
            <a href="#">下载中心</a>
            <a href="#">教程大全</a>
            <a href="#">登录</a>
        </div>
        <div class="left">
            <a href="#">HTML5</a>
            <p></p>
            <a href="#">CSS</a>
            <p></p>
            <a href="#">JavaScript</a>
            <p></p>
            <a href="#">Vue.js</a>
            <p></p>
            <a href="#">Node.js</a>
            <p></p>
            <a href="#">Ajax</a>
            <p></p>
            <a href="#">Django</a>
            <p></p>
            <a href="#">PHP</a>
            <p></p>
            <a href="#" >Flash</a>
            <p></p>
            <a href="#">ASP</a>
            <p></p>
            <a href="#">ASP.NET</a>
            <p></p>
            <a href="#">.NET</a>
            <p></p>
            <a href="#">JSP</a>
            <p></p>
            <a href="#">Perl</a>
            <p></p>
            <a href="#">JQuery</a>
            <p></p>
            <a href="#">react</a>
            <p></p>
            <a href="#">bootstrap</a>
            <p></p>
            <a href="#">StringBoot</a>
            <p></p>
            <a href="#">router</a>
            <p></p>
            <a href="#">DVA</a>
            <p></p>
            <a href="#">数据库</a>
            <p></p>
            <a href="#">C#</a>
            <p></p>
            <a href="#">Java</a>
            <p></p>
            <a href="#">C++</a>
            <p></p>
            <a href="#">C</a>
            <p></p>
            <a href="#">Go</a>
            <p></p>
            <a href="#">Python</a>
        </div>
        <div class="main_left">

        </div>
        <div class="main_right">

        </div>
    </body>
</html>

图片说明
运行之后就是这样，
float: left;设置无效，将width调整过，无效
求解

答

是左下角那个div不能左浮吗？看你的代码，你前面一个大的div没有设置float：left 那么后面一个
div你设置float：left也不能放在大div的旁边，必须要前一个左浮，后一个才能谈左右浮，因为每一个div
都是默认占一整行

可以啊，大div设置左浮就可以了看我的(复制的你的代码，只不过背景改为了红色):
图片说明

HTML+CSS设置div .main_right中的float:left无效

相关推荐