float和position的应用

float和position

元素浮动float——其格式为：

                          float :  none | left | right

                       特点如下：1、当float不等于none时，元素将被视为块级等于设置了display：block

                                                   2、当浮动一个文本类型元素时，要定义其width

                                                   3、浮动元素停留在包含它的父级元素，不会穿过padding区域

                                                   4、浮动元素的margin是不会重合的 

清除浮动的影响——其格式为：

                          clear :  none | left | right | both

                         作用：让浮动元素的某一个边的区域被清除，后续的元素从容器的正常位置开始显示

                                                       none：允许元素两边都可以有浮动元素

                                                        left：不允许左边有浮动元素

                                                        right：不允许右边有浮动元素

                                                        both：不允许元素两边都可以有浮动元素

• • • • • 注意：clear属性只能应用于块级元素，当某个元素的clear属性值为left时，该元素出现在容器中已经浮动到容器左边缘的任何元素之下

定位类型position——其格式为：

                          position：static | relative | absolute | fixed

                          作用：当position属性值被定下来之后，就用top、right、bottom、left这四个偏移属性设置

                                               实际的位置

1. 1. 1. 1. 1. statice：静态定位（默认值）元素盒按照在文档流中出现的顺序依次格式化
            2. relative：相对定位（参照物为自己本身）将移动元素盒，但是它在文档中的原始空间会保 留下来，特点如下：如果没有设置偏移量，层显示的位置和不设置position属性或者     position值取static时一样  
            3. absolute：绝对定位（参照物为最近的不是静态定位的祖先元素）元素盒彻底从文档流中脱离出来，不会影响周边元素的布局，并且它在文档中占据的空间不被保留，特点如下：若没有设置偏移属性的，默认被设置为auto。偏移值应用于元素盒的外边缘（如果有margin值得话，就包括margin值）
            4. fixed：固定定位（参照物为浏览器的窗口）它的作用和绝对定位一样，只是参照物不一样而已