1、CSS 盒子模型：
2、float 支持属性：left right none inherit（部分支持）
（1）float 属性影响范围：对紧随其后的块儿级元素起作用。
（2）清除浮动常用方法：在受影响的元素上
（3）对overflow：hidden 的理解
例如：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } .wrap{ width: 80%; margin:0 auto; } .content{ background-color: gray; /*height: 500px;*/ /*overflow: hidden;*/ } .left{ width: 80%; height: 300px; background-color: aqua; float: left; } .right{ width: 10%; height: 800px; background-color: yellow; float: left; } .footer{ background-color: red; } </style> </head> <body> <div class="wrap"> <div class="content"> <div class="left"> left </div> <div class="right"> right </div> </div> <div class="footer"> footer </div> </div> </body> </html>
（1）浮动后，footer 挤到顶部
（2）parent 加上 overflow:hidden;
-
- 我们原先的理解是，在一个平面上的浮动，但是通过试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！也就是说，当content 这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了box这个div，也就是说，此时的content 的宽高是多少，对于已经脱离了的box来说，都是不起作用的。当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个 属性中的解释，清除浮动是什么意思了。
- 当我们给box这个div加上overflow:hidden这个属性的时候，其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给box这个 div设置高度的时候，content 这个div的高度，就会撑开box这个div，而在另一个方面，我们要注意到的是，当我们给box这个div加上一个高度值，那么无论content 这个div的高度是多少，box这个高度都是我们设定的值。而当content 的高度超过box的高度的时候，超出的部分就会被隐藏。这就是overflow的含义！