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的含义!