css基础浮动相关知识

 复习第六天的知识
1、元素的隐藏方式：---display：none;     不会占用页面的空间
                   ---visibility:hidden; 占用页面的空间
2、display属性值：
    display：block;显示为块级元素
    display：inline;显示为内联元素
    display：inline-block;显示为行内块级元素
3、overflow属性值及作用
    overflow：hidden;   隐藏
    overflow：visible; 默认值，溢出
overflow：scale;    始终有滚动条
overflow：auto;     自动，当内容溢出时会出现滚动条，否则不会出现
4、float的属性值及含义
    float：none;  默认，不浮动
float：left;  左浮动
float: right; 右浮动
5、BFC的含义是块级格式化环境


今天的知识
1、块级与内联元素的浮动
    块级元素在文档流中的特点：块级元素是独占一行(垂直排列)
                              默认的宽度是父级元素的100%
  默认的高度是所有子元素高度之和
     没有子元素高度为零
块级元素设置为浮动的特点
    默认的高度和宽度为零，但是有效
宽度设置为100%--是相对于父级的
宽度和高度是所有子元素的宽度和高度之和
元素之间是水平排列
    

    内联元素在文档流中的特点：内联元素在页面是水平排列
                              高度和宽度是无效的


                    内联元素设置为浮动时的的特点：
    与块级元素设置为浮动的效果是一致的     
2、清除浮动
    clear：none;  默认值
clear：left;  清除左侧的浮动
clear：right; 清除右侧的浮动
clear：both;  清除两侧的浮动
案列：
    在父级元素结束的前面加div  <div style="clear:both"></div>
给父级选择器加overflow：hidden;清除父级产生的浮动
给父级加伪元素：.one::after{
                                 content: "";
                                 clear: both;
                                 display: block;}
3、固定定位
   position：fixed;
   元素会脱离文档流，始终相对于当前页面进行定位，
4、绝对定位
   position：absolute;
   两个div元素是父级与子级的关系--子级元素开启了绝对定位
        --父级元素不开启定位，子级元素是相对于页面的定位
    --父级元素开启定位，子级元素是相对于父级元素的定位
   
   元素会脱离文档流，元素会呈现块级元素效果，如果不设置偏移量，元素的位置不会发生改变
5、相对定位
   position：relative;
   相对于元素原本的位置的定义
   
   开启相对定位的元素，不会脱离文档流
   开启相对定位的元素。是相对于该元素在文档流中的定义效果
   开启相对定位的元素，不会改变元素的性质