                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /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

源自：CSS深入理解之margin 3-1

关注问题我要回答

1514

操作

收起

5 回答

SvenAs 回答被采纳 +2 积分
2017-02-22

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