1.bfc block format context
2.如何触发一个盒子的bfc
position:absolute;
display: inline-block
float:left/right;
overflow:hidden;
<html> <head> <link rel="stylesheet" href="cs2.css"> </head> <body> <div class="wapper"> <div class="content"></div> </div> </body> </html>
2.css 代码
*{ margin: 0; padding: 0; } .wapper{ 100px; height: 100px; margin-left: 100px; margin-top: 100px; background-color: black; } /* overflow: hidden; */ /* position:absolute; */ /* display: inline-block */ /* border-top: 1px solid red; */ .content{ margin-left: 50px; margin-top: 50px; 50px; height: 50px; background-color: green; }
3. margin 合并问题
<html> <head> <link rel="stylesheet" href="cs2.css"> </head> <body> <!-- margin 合并问题 --> <div class="demo1">1</div> <div class="wapper"> <div class="demo2">2</div> </div> </body> </html>
3. css
*{ margin: 0; padding: 0; } .demo1{ background-color: red; margin-bottom: 100px; } .demo2{ background-color: green; margin-top: 100px; } /* margin 合并问题 */ .wapper{ overflow: hidden; }
4.结论 margin问题一般不解决,直接设置margin-bottom:200px;