css float 文字环绕 文档流 问题 有关BFC?

发布于 2022-09-11 18:10:45 字数 1137 浏览 25 评论 0

如图

图片描述

代码
<!DOCTYPE html>
<html>
    <meta charset="utf-8">

    <head>
        <title></title>
    </head>
    <style>
        .imgbg {
            background: red;
            float: left;
            width: 100px;
            height: 300px;
        }
        
        .in {
            background: grey;
        }
        
        .out1 {
            background: orange;
            height: 100px;
        }
        
        .out2 {
            background: yellow;
        }
    </style>

    <body>
        <div style="overflow: hidden;float: left;">
            <div class="imgbg"></div>
            <p class="in">1.这部分内容为什么没有置顶?2.这部分内容的宽度于什么有关?</p>
        </div>
        <div class="out1">很明显灰色部分文字被我的line-height撑开了,但这是为什么?(外部的文字环绕div1)</div>
        <div class="out2">(外部的文字环绕div2)</div>
    </body>

</html>
求解答!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文