对 CSS 浮动布局的认识

引子

CSS的4大核心是"盒子模型, 普通文档流, 浮动, 定位".

刚开始学CSS的浮动时, 很困惑:

  • "块级元素"设置成浮动后, 为什么不再占据一行?
  • "行内元素"是否可以浮动? 什么表现?

"块级元素"设置成浮动后, 为什么不再占据一行?

在"普通文档流"中, "块级元素"默认会占据一行
如果"块级元素"设置了浮动, 就会脱离"普通文档流"进入"浮动层", 称为"浮动元素"; 而"浮动元素"的一个重要特性是倾向于自动收缩, 以包裹住子元素.

所以, "块级元素"设置成float之后, 如果没有指定宽高,它会自动收缩, 并始终包裹住子元素。不会像在"普通文档流"中一样独占一行


"行内元素"是否可以浮动? 什么表现?

测试:

  <style>
    *{
      margin:0;
      padding:0;
    }
    .firstSpan{
      float:left;
      width:200px;
      height:50px;
      border:1px solid #eee;
    }
    .secondSpan{
      float:right;
      width:200px;
      height:50px;
      border:1px solid #eee;
    }
    p{
      border:1px solid #000;
    }
  </style>
</head>
<body>
  <h3>测试一下行内元素是否可以浮动</h3>
  <span class="firstSpan">这是第一个行内元素</span>
  <p>这是第1个块级元素</p>
  <span class="secondSpan">这是第二个行内元素</span>
  <p>这是第2个块级元素</p>
</body>

最后布局效果:


可以看出:

  1. 行内元素可以设置浮动;
  2. 当"行内元素"设置浮动float时, 可以设置宽高;

总结

从使用角度上, 我们可以把元素分为"行内元素","块级元素"和"浮动元素"(不严谨,不过方便记忆和使用):

  1. 只要"行内元素"和"块级元素",设置浮动, 就可以定义为"浮动元素";
  2. "浮动元素"的特点: 不管之前是"行内元素"还是"块级元素", 设置浮动之后, 表现都是一样的 -- 可以设置宽高, 但是如果没有指定宽高,它就会自动收缩包裹住子元素, 而且不会占据一行;

文章历史

  • 2016/10/28 (第一次发布)

如果你觉得我的文章对你有用, 请打个"喜欢", 或者给些改进的建议 _

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 一、文档流的概念指什么?有哪种方式可以让元素脱离文档流? 1、文档流指的是元素在排列布局中所占用的位置,具体的说是...
    鸿鹄飞天阅读 806评论 0 0
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,882评论 0 6
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 1,251评论 0 6
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,665评论 0 30