CSS之float浮动元素定位机制

1 .6个子容器未设置浮动的状态如下

     子容器1
     子容器2
     水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
     水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
     水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
     子容器3
     子容器4
     子容器5
     子容器6
 

2.子容器1设置向左浮动，子容器2设置为block块级元素，子容器3设置向右浮动

    .one {
        background-color:#FFFF37;
        width:50%;
        height:100px;
        float:left;
        opacity: 0.5;
    }
    
    .two {
        background-color:#FF8000;
        width:60%;
        height:50px;
        display:block;
    }

    .three {
        background-color:#4F9D9D;
        width:20%;
        height:60px;
        float:right;
    }

3.分析下上图元素的渲染过程

——子容器1：向左浮动，被推至其所在行的最左边，因为是第一个子元素所以在第一行，效果就是推至父容器的左上角

——子容器2：因为块级元素无法感知浮动元素的存在，也就是说在它看来1是不存在的，所以也被推到父容器的左上角，因此子容器2和1产生重叠，且块级元素2会被浮动元素1遮盖

——匿名元素：就是父容器里的文字“水”，文字可以感知到浮动元素，形成环绕效果；2为block块级元素，所以文字就直接在2的下一行开始排列，但是因为能感知到浮动元素1的存在，所以就被推到1的边缘开始环绕排列

——子容器3：向右浮动，被推至其所在行的最右边

——子容器4：inline元素能感知到浮动元素，形成环绕效果；3向右浮动了，所以它原来的位置空了出来由子容器4补上，但因能感知到浮动元素3的存在，所以该行空出的位置放不下子容器4后，inline元素子容器4会选择把自己断开将放不下的部分放在下一行显示；从这也能看出inline元素设置height和width是无效的，因为它保持不了矩形

——子容器5、6：正常接着上一个inline元素进行同行排列

4.总结：

——inline元素设置height和width是无效的，但是如果设置了float为left 或right，就自动变成了block块级元素，高宽的设置就生效了

——对父容器影响：父容器无法感知浮动元素存在，可能会造成高度坍塌，需要清除浮动。
       对其他浮动元素： 浮动元素可以感知到浮动元素，高度不一样可能会出现卡住现象。
       对普通元素：普通元素（block、inline-block）无法感知浮动元素存在，会被浮动元素遮盖。
       文字和inline元素： 文字和行内元素可以感知到浮动元素，会形成环绕效果。

——先渲染浮动元素，后渲染普通块级元素