CSS学习笔记（float和盒子模型）

1、当元素或者是它的包裹层设置了绝对定位或者是浮动，那么margin:0 auto;自动居中的效果就不会实现。

2、盒子模型的三位立体结构图中从第一层到第五层依次为：border、content+padding、background-image、background-color、margin。

3、

设置了浮动属性（float）的元素：
1、会向指定方向（left或right）一直移动，直到容器边缘；
2、处于标准文档流中；
3、若不设置宽高，则以内容的宽高为准；
4、仅对紧邻的后续元素造成影响；

4、

清除浮动的常用方法
1、clear属性-常用clear：both；
2、clear：left，或者clear：right； 清除元素左侧或右侧的浮动
3、同时设置width：100%(或固定宽度）+overflow：hidden；也是可以清除浮动的。一般给受到浮动的元素设定的。
p{width:100%; overflow:hidden}或p{width：both}
4、在浮动元素的紧邻后续块元素之前加一个空标签（不推荐使用）

如果父包含层没有设置浮动，子包含层设置浮动，会对子包含层的父包含层和父包含层后面的会计元素产生影响！！所以要对父包含层设置清除浮动影响。
当父包含快缩成一条是，用clear：both清除浮动方法是无效的，clear：both一般用于紧邻后面的元素的清除浮动。
这种情况使用overflow：hidden会有效，

overflow:hidden 用来清除影响float对父级元素的浮动影响
clear:both;用来清除float对后面元素的浮动影响
5、隐形改变display的类型：不管是什么类型的元素，只要设置其样式为：position:absolute;float:left/right后dispaly就变为了inline-block;这样就可以设置宽高了。