CSS——脱离标准流float

1.float用法

//没有浮动的时候
.box1{
    width:100px;
    height:50px;
    background-color:red;
}
.box2{
    width:50px;
    height:50px;
    background-color:green;
}

//第一个盒子浮动，第二个盒子不浮动 的时候---第一个脱流，第二个变为“第一个”
.box1{
    width:100px;
    height:50px;
    background-color:red;
    float:left;
}
.box2{
    width:50px;
    height:50px;
    background-color:green;
}

//都浮动的时候

.box1{
    width:100px;
    height:50px;
    background-color:red;
    float:left;
}
.box2{
    width:50px;
    height:50px;
    background-color:green;
    float:left;
}

 

 

 

浮动float的元素 会脱流。注意：一个span标签如果浮动，不需要转成块级元素，就能设置宽度、高度。浮动的所有标签已经不区分行内、块了。

2.浮动的元素有“字围”效果

<div>盒子1</div>
<p>12345文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p>

 

 

div左浮动，p不浮动，div挡住了p，但是p中文字不会被挡住，形成“字围”效果。 

浮动的性质：脱标、贴边、字围、收缩。

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度（这点非常像行内元素）。