CSS之float浮动元素定位机制

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

<div>
     <span class="one">子容器1</span>
     <span class="two">子容器2</span>
     水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
     水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
     水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
     <span class="three">子容器3</span>
     <span class="four">子容器4</span>
     <span class="five">子容器5</span>
     <span class="six">子容器6</span>
 </div>

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

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