CSS-浮动

最新推荐文章于 2022-11-28 21:08:42 发布

普通旧朋友

最新推荐文章于 2022-11-28 21:08:42 发布

阅读量140

点赞数 1

本文链接：https://blog.csdn.net/qq_41646730/article/details/80961310

版权

浮动前

三个左浮

   <style>
        .tt{
            border: darkcyan 3px solid;
            overflow: hidden;
        }
        .left , .right{
            width: 100px;
            height: 100px;
            border: 3px double blue;
        }
        .left{
            border: yellow solid 3px;
            background-color: darkcyan;
            float: left;
        }
        .right{
            background-color: tomato;
            float: left;
        }
        .qq{
            border: 3px groove sienna;
            width: 100px;
            height: 100px;
            background-color: grey;
            float: left;
        }
    </style>
</head>
<body>
<div class="tt">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="qq">qq</div>
</div>

备注：

浮动过程中出现高度坍塌

在边框描述中添加：

overflow: hidden; 消除坍塌

或者等效方法

<style>
        .tt{
            border: darkcyan 3px solid;
         /*   overflow: hidden;*/

        }
        .clearfix:after{
            display: block;
            clear:both;
            content:"";
        }

        .left , .right{
            width: 100px;
            height: 100px;
            border: 3px double blue;
        }
        .left{
            border: yellow solid 3px;
            background-color: darkcyan;
            float: right;
        }
        .right{
            background-color: tomato;
            float: right;
        }
        .qq{
            border: 3px groove sienna;
            width: 100px;
            height: 100px;
            background-color: grey;
            float: right;
        }
    </style>
</head>
<body>
<div class="tt clearfix" >
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="qq">qq</div>
</div>


</body>

普通旧朋友

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-浮动

浮动前三个左浮 &lt;style&gt; .tt{ border: darkcyan 3px solid; overflow: hidden; } .left , .right{ width: 100px; height: 100px; ...
复制链接

扫一扫