前端基础练习---7

  1. 请说明float形成文字环绕效果的原理。

  2. 有如下代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <style>
                b{
           
           
                    float:left;
                    width:100px;
                    height:100px;
                    border:1px solid green;
                }
            </style>
        </head>
        <body>
            <b></b>
        </body>
    </html>

    b的宽度为多少?
    102

  3. 如下代码会导致的结果是什么?
    会高度塌陷

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <style>
                #f{
           
           
                    width:500px;
                    border:1px solid red;
                }
                #z{
           
           
                    float:left;
                    width:300px;
                    height:300px;
                    border:1px solid blue;
                }
            </style>
        </head>
        <body>
            <div id="f">
                <div id="z"></div>
            </div>
        </body>
    </html>

    #f加上float:left之后结果是什么?
    父类高度会被撑开

  4. 子元素浮动时撑开父元素高度的方法迄今为止有哪些,有什么特点?

猜你喜欢

转载自blog.csdn.net/qq_42592823/article/details/114544736