您的位置：首页 > 其它

【初级-个人理解】float是否脱离普通流？是否占据空间？以及浮动对内联和块元素的影响。

2016-11-30 09:36 211 查看

注：本文纯属个人理解。

First: “文档流”是，在css里面的定义是 normal flow（普通流）

链接（英文）：https://www.w3.org/TR/CSS21/visuren.html

[b]链接（中文引用博客链接）：http://blog.csdn.net/winnersong/article/details/1379324
[/b]

question 01：什么是普通流（normal flow）？

首先，我们知道一个完整的网页即html文件是由众多的标签搭建形成的，标签在元素类型上分为如下三种。

块级元素：独占一行，可设置 width
和 height 属性。

[b] 内联元素：紧随前面的元素从左至右依次排列直到这一行的空间排满才会换行，不可设置 width 和 height
属性。[/b]

内联块级元素[b]：从左至右依次排列，可设置
width 和 height 属性。[/b]

讲到这里，普通流也差不多描述出来，普通流实则是标签在html中的排列方式——块级元素独占一行垂直排列，内联元素在行内从左至右依次排列

Start：

按照所了解的float会脱离普通流，脱离后占不占空间的问题。
PS：（[b]黑色边框为父div1，灰色区域div2，红色区域div3，img）[/b]

首先，我们需要了解的是。float这个属性出现的目的是为了实现文字环绕图片的效果；其次，通常讲的脱离普通流的说法是准确的，我个人认为。单从float属性
的目的来讲，实现的就是文字环绕的效果，如果从这点来讲毫无疑问是浮动后占据原来空间的，我们知道元素可分为三类下面我们会分别展开讨论。 BUT 下面的例子中我们会看到有的情况下它又是不占据空间的，从下面单一的小实验总结了一下：

情况一（浮动占据空间）：浮动元素后紧随的标签果是内联或内联块元素。

情况二（浮动不占据空间）：浮动元素后紧随的是块级元素或者图片的时候。

01 div2: block, div3 : block , img: block

02 div2: block float : left, div3 : block , img: block

[b]
[b]03 div2: block float : left, div3 :
inline-block , img: block
[/b][/b]

[b][b] 问题来了：如果说脱离了文档流，为什么当div3改成内联块元素的时候
它能自动分隔开div2 的宽度。[/b][/b]

[b]

04 div2: block float : left, div3 : inline-block
margin-left:20px , img: block
[/b]

[b] 在上面的基础上再给div3增加一个margin-left：20px；我们会发现，这个外边距会从div2 的右边开始计算。[/b]

[b]

[/b]

[b]05 删除div3 给img 分别设置 inline、inline-block、block，我们发现img 始终在与div2 在一行从左至右依次排列。[/b]

[b]

[/b]

02 div2: block float : left,
div3 : block , img: block

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： float 脱离文档流 float是否脱离普通流内联元素内联块元素块级元素

相关文章推荐

新的分享

章节导航