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

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

来源：3-1 正确看待CSS的margin重叠

不是江南

2017-01-13 19:11

<!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>

写回答关注

5回答

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 0
mirro81

2019-05-28 18:12:47

sdfsdfsd

0 0
用户1139579

2018-10-26 15:23:32

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

0 0
qq_一桥轻雨一伞开_2

2017-07-09 16:37:32

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

0 0
慕粉212424200

2017-01-13 20:23:05

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

0 0