问答详情
源自：3-1 正确看待CSS的margin重叠

第三个盒子没有出现margin-top重叠问题，请问是修复了吗？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .father1,.father2,.father3{
                float: left;
                margin-right: 10px;
            }
            .son1{
                margin-top: 80px;
                background-color: burlywood;
            }
            .father2{
                margin-top: 80px;
            }
            .son3{
                margin-top: 80px;
            }
            .father3{
                margin-top: 80px;
            }
        </style>
    </head>
    <body>
        <div class="father1">
            <div class="son1">我是son1</div>
        </div>
        <div class="father2">
            <div class="son2">我是son2</div>
        </div>
        <div class="father3">
            <div class="son3">我是son3</div>
        </div>
    </body>
</html>

提问者：不是江南 2017-01-13 19:11

个回答

  • SvenAs
    2017-02-22 15:54:45
    已采纳

            事实上，你这里的三个元素都没有发生margin重叠，你把father1和son2加上margin-top，会发现，他们都没有重叠了。margin重叠只发生在普通的block元素上，加上float虽然也会使元素block，但却不是普通的block元素，应该是脱离文档流的block元素,视频前面也说了，float和absolute元素除外。把father1,2,3的float去掉。在每个盒子外面加一个盒子再加上float:left看看吧

    0
  • mirro81
    2019-05-28 18:12:47

    sdfsdfsd

    0
  • 用户1139579
    2018-10-26 15:23:32

    margin重叠特性第一条就是说：元素为block水平元素(不包括float和absolute元素)

    0
  • qq_一桥轻雨一伞开_2
    2017-07-09 16:37:32

    父级和子级的margin-top都是80px，所以第三个盒子的上外边距就是80px，这就是重叠了呀

    0
  • 慕粉212424200
    2017-01-13 20:23:05

    只有一个margin-top。也不会有重叠呀

    0