浮动
为何需要浮动？
浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。
浮动问题？
为何要清除浮动？
很多情况下父盒子不方便给高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { border: 1px solid red; width: 300px; } .big { width: 100px; height: 100px; background-color: purple; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>