浮动

1.定位概述

        元素应该出现在网页中的哪个位置

    2.定位的分类

        1.普通流定位(文档流定位)

           块元素：默认是从上往下排

           行元素：默认从左往右排序

        2.浮动定位

        3.相对定位

        4.绝对定位

        5.固定定位

    3.浮动定位(俯视)

        1.什么是浮动定位或者特点

            1.会将元素排除在文档流之外(脱离文档流)

            2.元素不再占据页面空间

            3.其他元素要向前补位

            4.浮动元素会停靠在父元素的左边或者右边

              或者

              停靠在已经浮动的元素的边缘上

        2.处理的处理（作用）

            1.让块元素在一行显示

        3.属性

            float:

            取值:

                right   右浮动

                left    左浮动

                none    默认 不浮动

#d1{
width:200px;
height:100px;
background-color: red;
float:left;
}
#d2{

width:200px;
height:100px;
background-color:green;
}
#d3{
background-color:purple;
width:200px;
height:100px;
}

    将红色背景的div想左边漂浮，则原来的绿色div不显示是红色被遮挡在面。 

将三块div全部想左漂浮，则全部展现。块元素浮动处理则展现在一行显示，排序body内div排布顺序按照顺序排列。

#d1{
width:200px;
height:100px;
background-color: red;
float:left;
}
#d2{

width:200px;
height:100px;
background-color:green;
float:left;
}
#d3{
background-color:purple;
width:200px;
height:100px;
float:left;
}

   4.特殊处理

            1.如果父元素的宽度已经

                装不下所有已经浮动的元素，

                那么最后一个将会换行

            2.浮动元素如果不设置宽的话，

               那么元素的宽度将会自适应

            3.所有浮动起来的元素都会变成块元素

                块元素：能设置宽和高

            4.浮动元素对 文字 行内元素 有特殊的影响

                 特殊的影响:文本环绕