1.当div标签中含有子标签，如果div标签的大小是被div中的子标签撑起来的，那么可能布局(之后)可能就会出现问题(if 父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .outer{ background-color: gold; 300px; height: 300px; overflow: hidden; } .box1{ 100px; height: 100px; background-color: blue; margin-top:10px; /*margin-top 是以id =div1 的这个标签*/ } .box2{ 100px; height: 100px; background-color: darksalmon; /*如果这样的话就合适呢，对着就下去了*/ margin-top: 10px; } </style> </head> <body> <div id="div1" style="background-color: burlywood; 300px; height :300px"></div> <div style="background-color: chartreuse"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .outer{ background-color: gold; 300px; height: 300px; overflow: hidden; } .box1{ 100px; height: 100px; background-color: blue; margin-top:10px; /*margin-top 是以class=outer 的这个标签*/ } .box2{ 100px; height: 100px; background-color: darksalmon; /*如果这样的话就合适呢，对着就下去了*/ margin-top: 10px; } </style> </head> <body> <div id="div1" style="background-color: burlywood; 300px; height :300px"></div> <div class="outer"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
解决方法:设置padding bording，让div便签称为子标签的真正的父标签
这两种会改变结构
1.加上padding
2.加上border
不改变结构
3.overflow:hidden (理解：相当给div标签设置了隐藏的边界，否则不会出现超出部分隐藏功能了)，还有一点，overflow:hidden 清除浮动