解决margin塌陷与margin合并（margin）清除浮动问题
|
``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <span>1</span> <span>2</span> <div>3</div> <div>3</div> </body> </html> ``` 效果： 解决垂直方向的margin合并问题也是触动盒子的BFC。 解决方法如下：（嵌套盒子：然后：overflower:hidden;） ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <span>1</span> <span>2</span> <div> <div>3</div> </div> <div>3</div></body></html>``` 效果：
**总结：** 在实际开发时不解决这个问题，比如说要解决垂直方面200px，为什么不直接top200px呢，不用top100px,然后bottom100px。 **顺带说一下清除浮动的两种两种方法：** （1）在有浮动的元素的后面加入一个标签。 下面我就简单举例了： <div class = "clear"></div> css中： .clrar{clear:both;} (2)使用伪类元素，找到需要清除的标签，直接使用三件套： .warpper::after{ content:""; clrar:both; display:block; } 总结 以上所述是小编给大家介绍的解决margin塌陷与margin合并（margin）清除浮动问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！ （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |