学习div的浮动

1.下图是为设置浮动的效果

代码：

<style type="text/css">
        .father{
            margin: 10px auto; padding: 10px;
            border: 1px solid #070707;background-color: #ffe124;
        }
        .father div{
            margin: 10px;padding: 10px;border:  1px solid #070707;
            background-color: #558cff;
        }
        .father p{
            margin: 10px;padding: 10px;border:  1px solid #070707;
            background-color: #ff9f99;
        }
    </style>

<div class="father">
    <div class="son1"></div>
    <div class="son2"></div>
    <div class="son3"></div>
    <p class="clear">学习div的浮动属性</p>
</div>

效果图：

2.设置div1为左浮动

 .son1{
            float:left;
        }

效果图：

当div1设置浮动，完全脱离了标准流之后，其他div视div1不存在,占据了div1的位置，div2的内容环绕着浮动的容器。由于div1设置了margin属性，所以div2的内容和div1之间存在一定的距离。

当浮动的容器没有设置大小时，容器的大小由容器内的内容决定。

3.设置所有div的浮动属性为左浮动，p标签就忽略div，p的内容环绕着div

效果：

4.设置div3为右浮动

 .son3{
            float:right;
        }

效果：

注：
当拖动屏幕时，

左右盒子的个数不一样，所有浮动方向相同、盒子个数多的一方，排在后面的div先向下移动（换行）；

左浮动和右浮动的盒子的个数一样时，带html中排在代码后面的盒子先换行；

5.去除其他盒子浮动对自己的影响

去除左浮动的影响：clear:left

去除右浮动的影响：clear:right

去除左右浮动的影响：clear:both

 

6.容器的定位position

容器的定位有四种情况：static、relative、absolute、fixed

标准定位：static

相对定位：relative

绝对定位：absolute

固定定位：fixed

当定位的盒子没有设置大小时，盒子的大小由盒子内容的大小决定。

相对定位是盒子相对于自己本身的位置进行移动，

代码：

 .son1{
              position: relative;
            left: 20px;
            top: 20px;

          }

效果图：

绝对定位是查找自己的父容器，把离自己最近的设置了定位属性的父容器作为自己定位的依据，如果所有的父容器均为设置定位属性，则选择浏览器窗口为定位依据。

容器div1设置了定位

.son1{
                position: absolute;
                right: 0px;
                top: 0px;

            }

效果图：

固定定位fixed属性的参考点是浏览器页面，当设置了容器的定位属性为display:fixed;bottom:0px;后容器始终显示在浏览器页面的下端。

7.容器的display属性，display属性控制容器的显示，

块级盒子：disply:block

行内盒子：display:inline-block(或dispay:inline)

隐藏盒子：display:none

容器div、p都是块级盒子，span为行内盒子，可以在块级盒子中设置属性为display：inline-block即可将块级盒子变为行内盒子显示在界面上。当一行不能容纳下所有的行内盒子时，会自动换行进行显示。