css浮动原理和特性

float浮动原理

　　语法：

　　　　float： left | right | none | inherit

　　原理： 

　　　　使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来

float浮动特性

　　1.块元素在一排显示

　　2.内联元素支持宽高

　　3.默认内容撑开宽度

　　4.脱离文档流

　　5.提升层级半层

浮动特性案例解释

案例1

html：

<div class="div1">div1</div>
<div class="div2">div2</div>

css:

    .div1,.div2{
        float: left;
        font-size: 30px;
    }
    .div1{
        background: red;
    }
    .div2{
        background: yellow;
    }

效果图：

说明：

　　由效果图可以看出，加了float:left属性后，div块元素由原来的各自独占一行变为两个块元素都在一行显示，且宽度不是默认的100%，是由内容撑开。由此可以验证浮动特性中的两点：

块元素在一排显示；默认内容撑开宽度。

案例2

html:

<span class="span1">span1</span>
<span class="span2">span2</span>

css:

    .span1,.span2{
        float: left;
        font-size: 30px;
        height: 100px;
        width: 100px;
    }
    .span1{
        background: red;
    }
    .span2{
        background: yellow;
    }

效果图：

说明：

默认的行元素span不支持宽高，加了float之后支持宽高了，验证了浮动使内联元素支持宽高这一特性。

案例3

html:

<div class="div1">div1</div>
<div class="div2">div2</div>

css:

    .div1{
        background: red;
        width: 100px;
        height: 100px;
        float: left;
    }
    .div2{
        background: yellow;
        width: 200px;
        height: 200px;
    }

效果图：

 

说明：

div1浮动于div2之上，即可说明浮动元素脱离文档流这一特性。正常的元素内容会位于元素内左上角，但是div2的文本内容紧挨div1，这说明浮动元素提升层级半层，即提升到元素内容的层级。