css消除浮动父元素overflow法

lxl211

2024-04-23 帮助1人

假如现在没有清除浮动：
代码：

<style>
        .box {
            /* **************父元素overflow************ */
            /* overflow: hidden; */
            width: 1000px;
            border: 1px solid blue;
        }

        .a1,
        .a2,
        .a3 {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /* 加浮动 */
            float: left;
        }
        .a3 {
            width: 1200px;
            height: 100px;
            background-color: palegoldenrod;
        }
        .footer {
            width: 1000px;
            height: 90px;
            background-color: black;
        }
    </style>
    
    <body>
    <div class="box">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
        <div class="a3">a3</div>
    </div>
    <div class="footer"></div>
</body>

运行结果：
学新通
消除浮动：父元素overflow法----语法
在父级元素里添加：overflow: hidden;就可以消除浮动
语法：
父级选择器{
overflow: hidden/auto/scroll;
}
消除后的结果：

缺点：

子盒子过长，会导致显示不全

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhgeieha

系列文章

css消除浮动父元素overflow法

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

怎样阻止微信小程序自动打开

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐