CSS 谈谈浮动与清除浮动(overflow)

float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神奇,于是乎就去问了师匠:

Normal flow is the way that elements are displayed in a web page in most circumstances. All elements in HTML are inside boxes which are either inline boxes or block boxes.

float其实是脱离了常规流,当然这么说肯定是听不懂的啦,我们来看一个示例:http://test.codesky.me/text-round.html

好了,很显然,有一种看上去覆盖的效果,实际上,这是由渲染次序决定的:

A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When this happens, floats are rendered in front of non-positioned in-flow blocks, but behind in-flow inlines.

如果一个 float 元素覆盖在了一个在常规流里的元素 那么 float 元素会在没有用 position 定位的块级元素之前渲染

看看,又和position扯上关系,而且position还能决定渲染顺序,顿时感觉好麻烦。

而至于文字,不多说,基本上属于渲染设定类,人家就是会避开浮动部分显示。

关于overflow,传送门:http://zh.learnlayout.com/clearfix.html

当然坑很多,节哀。

植入部分

如果您觉得文章不错,可以通过赞助支持我。

如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 知识, 语法

添加新评论