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

如图

图片描述

代码
<!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>
求解答!
阅读 1.6k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题