怎么让div换行

  • 原创
  • |
  • 浏览:42213
  • |
  • 更新:
  • |
  • 标签:HTML CSS 

怎么让div换行,div是HTML的标签,经常会见到。div标签实际上创建以后就是每个标签默认是一行的,但是如果添加一些样式,比如float就会变成同一行,这个时候就教大家怎么处理了。

怎么让div换行

工具/原料

  • 网页浏览器,例如Chrome
  • 编辑器,例如sublime text3

方法/步骤

  1. 1

    打开编辑器,这里以sublime text3作为示范,创建一个html文档,并且设置基本框架。

    怎么让div换行
  2. 2

    这里创建与html文档关联的css文档。

    怎么让div换行
  3. 3

    这里创建三个div标签,并且设置样式。

    怎么让div换行
    怎么让div换行
  4. 4

    如果是项目需求,我们加入了这个样式。

    div {

        float: left;

    }

    那么就会看到全部div处于同一行。

    怎么让div换行
    怎么让div换行
  5. 5

    如果我们给最后一个div加入样式:

    clear: both;

    那么就会清除格式并且换行。

    怎么让div换行
    怎么让div换行
  6. 5
    本页面未经授权抓取自百度经验
  7. 6

    因此我们也需要为第二个div添加 clear: both,这样就能换行了。那么第一个加上或者不加也是一样的效果。

    怎么让div换行
    怎么让div换行
    怎么让div换行
    END

注意事项

  • 注意clear是会清楚样式的
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。
展开阅读全部
相关标签HTMLCSS