On the invalidation of the parent element margin after the child element floats

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .a{
            width: 80%;
            border: 1px solid red;
            margin: 100px auto;
            text-align: center;
            overflow: hidden;

        }
        .a:hover{
            transform: scale(1.2,1.2);
        }
        p{
            float: left;
            margin-left: 20px;
            display: block;
        }
        .b{
            width: 80%;
            border: 1px solid red;
            margin-top: 100px;
            text-align: center;
            overflow: hidden;
        }
        .b:hover{
            transform: scale(1.2,1.2);
        }
    </style>
</head>
<body>
<div class="a">
    

1

2

3

</div> <div class="b">

1

2

3

</div> </body> </html> ppmargin-leftmargin-topbottommargin: 0 auto;
Css
Jul.15,2021

I tried margin-top with your code. (chrome 69)

Menu