Web布局:浮动

更新日期: 2019-08-28阅读: 2.6k标签: 浮动

浮动的介绍

不知道大家是否和我有同样的一个感觉,每当拿起一篇杂志文章,总能发现左边或右边有图片,文字流畅地围着图片,这就是打印世界中看到的浮动:


在Web的世界中,css的 float 设计初衷也是用来处理文本围绕图片排版的,就像在杂志布局中一样。碍于当时Web布局可用方案的局限性,聪明的CSSer才把 float 用于Web的布局当中,这一用就用了很多年,直到Flexbox的成熟才慢慢的看不到 float 用于Web布局的影子。但这并不能表明,浮动就将退出历史的舞台。因为在Web中处理文本围绕图片的排版始终是离不开浮动的。当然,如果你愿意的话,在什么时候你都还可以使用浮动来完成Web的布局,只不过在某些场景中使用浮动布局会有一定的缺陷性。


什么是浮动

既然是要聊浮动,那么我们从她的定义开如聊起吧。W3C是这样对浮动定义的:

浮动是在当前行上向左或向右移动框(盒子)。浮动最有趣的特性是内容可能沿着它的侧流动。内容沿着左浮动框的右侧向下流动,并沿着右浮动框的左侧向下流动。



浮动的行为和本质

在探讨浮动的行为和本质之前,有几个概念先简单的介绍一下:

  • 文档流 :在html中文档流即为元素从上至下排列的顺序或自左向右的排列
  • 脱离文档流 :元素从正常的排列顺序中被抽离
  • 最左边/最右边 :移动到父元素最左和最右是指元素往左或往右移动,直到碰到另一个浮支元素或父元素内容区的边界

在Web中,HTML文档会受到一些规则约束,特别是正常的文档流。在正常的文档流中,每个块级元素(比如 div 、 p 等)垂直地堆叠在一起,从视图的顶部向下堆叠。但元素要是使用了浮动特性,元素会脱离文档流。

咱们可以这样来理解,把HTML文档当作一张白纸。当我们在一个元素上运用浮动时,就像是在该元素上添加了另一张纸:


浮动元素将会浮动到新图层上:


由于它不再是原始层(正常文档流)的一部分,下面的块元素会向上移动(非块元素表现行为有所差异),就像浮动元素从来没有在文档中存在过一样:


重要的是要理解 浮动元素不再完全包含在声明它的CSS框中 。它实际上浮在其他HTML元素之上。

事实上,浮动元素首先根据常规流布局,然后从常规流中取出并将其移到父元素的最右侧或最左侧(取决于应用浮动的哪个值,后续会介绍)。也就是说,如果父元素中有足够的空间容纳每个浮动元素,那么之约们就会从一个堆叠到另一个相邻。


刚才提到一个问题:“父元素中有足够的空间容纳每个浮动元素”。那么如果没有足够的之空间容纳呢?

在浮动中,如果容器没有足够空间容纳浮动元素时,那么浮动元素将会在新的一行并排,如上图右侧的图所示。

事实上,浮动的本质是浮动元素自身就是一个带有方位的 display: inline-block 属性。某种意义上的作用就是包裹,但浮动又无法完全等同 display:inline-block ,其中原因之一就是浮动的方向性:

display:inline-block

链接: https://www.fly63.com/article/detial/5554

为什么设置overflow为hidden可以清除浮动带来的影响

在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了。使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动的方法,最常用的就是设置父元素的overflow:hidden这个属性

详解利用clear清除浮动的一些问题解决

我们一直在说 解决 高度塌陷都问题,从来没有说清除浮动。 是因为本质上,浮动并没被清除,我们只是利用clear属性解决了浮动元素带来的父级元素高度塌陷问题。而且clear属性影响也只是设置clear属性的元素本身,而不是浮动元素。

css清除浮动的原理

最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解

什么是BFC? CSS 如何使用伪元素清除浮动?

BFC概念:块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。

清除浮动的4种方式

清除浮动:根据情况需要来清楚浮动 。清除浮动的目的: 就是为了解决 父 盒子高度为0 的问题。1.、额外标签法 给浮动盒子的后面添加一个新的div;2、overflow:hidden 触发了bfc模式

我对BFC的理解

对CSS有了解的道友们肯定都知道盒式模型这个概念,对一个元素设置CSS,首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC,以及其他的FC。

总结清除浮动的方法

方法一、在结尾处添加空div标签clear:both;方法二、父级div定义 overflow: auto;方法三、使用伪元素来清除浮动(:after,注意:作用于浮动元素的父亲)

CSS如何清除浮动?清除浮动的几种方式

在前端开发过程中,我们经常会使用到浮动(float),这个我们即爱又恨的属性。爱,是因为通过浮动,我们能很方便地进行布局;恨,是因为浮动之后遗留下来太多的问题需要解决。下面本篇文章给大家介绍CSS清除浮动的几种方法

BFC是个啥?

在CSS布局中,是通过对一个个box的布局,来实现整体页面的布局,这一个个box也就是一个个容器元素,这些元素分为两类:块级元素(block),行内元素(inline)。 对于不同类型的元素

CSS浮动标准修复top塌陷和清除浮动及IE兼容标准格式

浮动元素有左浮动(float:left)和右浮动(float:right)两种,浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!