今天被问到 clear 为什么能清除 float 的元素

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3298 天前的主题，其中的信息可能已经有所发展或是发生改变。

虽然当时没答上来，但感觉还是个不错的问题

float

Clear

清除

上来

7 条回复 • 2015-12-09 08:59:48 +08:00

smilingsun

2015-12-09 00:20:24 +08:00 via Android

因为创建了 BFC ？

xwartz

2015-12-09 00:49:06 +08:00

@smilingsun

但是根据文档上说的：
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

也就是说创建 BFC 的条件是：
1. float 的属性不是 none;
2. overflow 的属性不是 visible;
3. position 的属性是 absolute,fixed;
4. display 的属性是： inline-block,table-cells,table-caption.

并没有说到 clear ... 然后我现在还在查

formatComb

2015-12-09 01:09:11 +08:00

触发 BFC 最主要的无非三种方式：

1.父元素 overflow
2.父元素 absolute fixed
3.内部最后的子元素为块状（包括 inline-block ）、清除浮动

可以说末尾子元素的 clear 属性能够触发 BFC ，但是和这题应该没啥关系吧。
clear 值能够清除浮动本来就这么设定的，要么是我学艺不精，要么是问问题的人不知道自己想问啥……

Hyperion

2015-12-09 01:35:43 +08:00 via Android

http://www.w3.org/TR/CSS2/visuren.html#flow-control
('・ω・')

Biwood

2015-12-09 01:39:49 +08:00

这问题就好像在问 1+1 为什么等于 2 ，真是蛋疼， clear 翻译成中文就是“清除”，清除什么？不就是为了清除浮动么。

Niphor

2015-12-09 02:49:46 +08:00

同意楼上的

xwartz

2015-12-09 08:59:48 +08:00

@formatComb
@Biwood
@Niphor

也许他可能想问的是 BFC ... 然后自己也并没有理解触发 BFC 的条件...
然后我当时想不到 clear 为什么能清除浮动，就反问了一下， float, absolute 为什么能造成脱离文档流，然后他也没回答我...