为什么这样会塌陷,p标签没有形成BFC 一定要套个div?

为什么这样会塌陷,p标签没有形成BFC 一定要套个div?

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }


        p {

            width: 200px;

            height: 200px;

            background-color: orange;

            margin: 50px;

            overflow: hidden;

        }


        .s1 {

            float: left;

            width: 300px;

            height: 300px;

            background-color: red;

        }


        .s2 {

            overflow: hidden;

            width: 200px;

            height: 200px;

            background-color: blue;

        }

    </style>

</head>


<body>


    <p></p>


    <p></p>



    <section class="s1"></section>

    <section class="s2"></section>

</body>


</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2022-12-25 09:41:46

同学你好,问题解答如下:

1、p标签设置了overflow:hidden;形成了BFC,针对p标签里面的元素,margin不会塌陷,但是并不会影响p标签自身,所以p标签的margin依然会塌陷。

2、套个div设置overflow:hidden;形成BFC,也是针对div里面的元素margin不会塌陷,而此时p标签作为div的子元素,处于BFC里面,所以margin不会塌陷。

祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师