块状元素、行内元素、行内块状元素同行换行显示以及float后的情况

Div同行显示，给设置float属性，脱离文档流

    <div style="width:300px;background-color:red;float:left;">DIV1div>
    <div style="width:200px;background-color:blue;float:left;">DIV2div>
    <div style="width:200px;background-color:yellow;float:left;">DIV3div>

效果

Span同行换行float之后

    <span>你好好好span>
    <span>你好好好span>
    <span style="display:block;width:300px;background-color:red;">他被设置了blockspan>
    <span style="background-color:blue;">我好好好span>
    <span>他之前的span>
    <span style="float:left;">我被设置了float：leftspan>
    <span>他之后的span>

效果

Button、Input是行内块状元素，本身是同行显示

Button：
<button name="1">按钮button>
    <button name="2" style="display:block;">我要占一行button>
    <button name="3">按钮button>
    <button name="3">按钮button>
    <button name="4">float前面的button>
    <button name="3"style="float:left;">float:leftbutton>
    <button name="4">float后面的button>
    <button name="5">按钮button>
    <button name="5">按钮button>

效果

input:
    "1"value="你好"/>
    "1"value="你好"/>
    "1"value="我要占一行" style="display:block;"/>
    "1"value="大家好"/>
    "1"value="float前面的"/>
    "1"value="float:left" style="float:left;"/>
    "1"value="float后面的"/>
    "1"value="大家好"/>

效果