一、塌陷问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .out { width: 300px; background: red; overflow: hidden; } /*.out:before { content: ""; display: table; }*/ .in { width: 100px; height: 100px; background: green; margin-top: 100px; float: left; } </style> </head> <body> <div class="out"> <div class="in"></div> </div> </body> </html>
二、清除浮动和宽高计算方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .out { width: 350px; background: red; } .in { width: 100px; height: 100px; box-sizing: border-box;/*border+padding+content=width*/ background: green; border: 10px solid blue; float: left; } </style> </head> <body> <div class="out"> <div class="in"></div> <div class="in"></div> <div class="in"></div> <div class="in"></div> <div class="in"></div> <div class="in"></div> <!--清除浮动--> <div style="clear: both"></div> </div> </body> </html>
