Div同行显示,给设置float属性,脱离文档流
<div style="width:300px;background-color:red;float:left;">DIV1</div>
<div style="width:200px;background-color:blue;float:left;">DIV2</div>
<div style="width:200px;background-color:yellow;float:left;">DIV3</div>
效果
Span同行换行float之后
<span>你好好好</span>
<span>你好好好</span>
<span style="display:block;width:300px;background-color:red;">他被设置了block</span>
<span style="background-color:blue;">我好好好</span>
<span>他之前的</span>
<span style="float:left;">我被设置了float:left</span>
<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:left</button>
<button name="4">float后面的</button>
<button name="5">按钮</button>
<button name="5">按钮</button>
效果
input:
<input name="1"value="你好"/>
<input name="1"value="你好"/>
<input name="1"value="我要占一行" style="display:block;"/>
<input name="1"value="大家好"/>
<input name="1"value="float前面的"/>
<input name="1"value="float:left" style="float:left;"/>
<input name="1"value="float后面的"/>
<input name="1"value="大家好"/>
效果