关于html中,嵌套多个盒子浮动的问题。

//贴上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .box1{    
                width:300px;
                height:300px;
                background-color: red;    
            }
            .box2{
                float:right;
                width: 200px;
                height:200px;
                background-color: green;
            }
            .box3{
                width:100px;
                height:100px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">    
                <div class="box3">
                </div>
            </div>    
        </div>        
    </body>
</html>

结果如图所示

 /*由此得出结论,当给box2设置右浮动时,box2里面的box3盒子并不会继承浮动属性*/

猜你喜欢

转载自blog.csdn.net/qq_42122409/article/details/82987087