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

最新推荐文章于 2025-05-20 14:21:17 发布

原创最新推荐文章于 2025-05-20 14:21:17 发布 · 7.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了HTML中元素的布局技巧，包括如何使用float属性使div元素同行显示，span元素通过float实现换行显示，以及button和input作为行内块状元素的默认显示方式和改变方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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="大家好"/>

效果
这里写图片描述