关于清除浮问题问攻城师们

V2EX = way to explore

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

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

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

什么时候用什么方式来清除浮云，越详细越好！谢谢，初学者，不懂的好多！

第 1 条附言 · 2013-07-23 15:37:38 +08:00

还是清除浮动的问题，求解！
一个主容器里面的3个盒子，上面有2个盒子一个左浮动一个右浮动，最后一个盒子不浮动那要怎么清除浮动咧？
我最常用的是在最后一个盒子上面加一个结构然后清除我觉得这方式不好在结构里写个空标签不太好

第 2 条附言 · 2013-07-31 22:29:56 +08:00

谢谢你们的解答，关于清除浮动的问题已经有了个大概的概念！

第 3 条附言 · 2013-07-31 22:38:55 +08:00

最近遇到个清除浮动的问题，IE8下面，主容器里面有三小容器，分别是左中右三容器，然后在主容器上用overflow：auto清除自身浮动时，右容器下滑还出现scorllbar ，关于这个问题在不改变用overflow：auto清除浮动的情况下，怎么修复这个BUG

清除

师们

初学者

13 条回复 • 1970-01-01 08:00:00 +08:00

thinkxen

2013-07-17 22:04:12 +08:00

我喜欢在父元素里用overflow:hidden;好想需要给定宽度。
也有其他的，看自己喜好了~~~
好久没写CSS了，忘差不多了~~~

airyland

2013-07-17 22:04:32 +08:00 via Android

麻烦自己google

chshouyu

2013-07-17 22:09:06 +08:00

.cf:after { content:""; display:table; clear: both; overflow:hidden;}
.cf { zoom: 1;}

aggron

2013-07-17 22:11:20 +08:00

.clearfix{*zoom:1}

.clearfix:before, .clearfix:after{
display:table;
line-height:0;
content:""
}

.clearfix:after{clear:both}

来自bootstrap, 在父容器中指定class="clearfix"就OK了

83f420984

2013-07-18 07:54:09 +08:00

@aggron
@chshouyu
@thinkxen
@airyland 谢谢了，貌似没有说明这些是在那些地方用的？不可能有成万能浮动清除吧？比如说我昨天就遇到个，上面的容器浮动后，下面的容器在父元素里写了个clear:both清除浮动后，这个容器的margin-top就失效了，说明清除浮动失败了啊。

Perry

2013-07-18 08:16:29 +08:00

可以试试bourbon的clearfix
https://github.com/thoughtbot/bourbon/blob/7ff5ebfda1fef6238411065f193abbdadaea6e0b/app/assets/stylesheets/addons/_clearfix.scss

DaniloSam

2013-07-31 18:48:51 +08:00

附言, 是你的布局思路问题, 不是浮动的问题

你一定是这样布局的吧

<div class="float_left"></div>
<div class="none_float"></div>
<div class="float_right"></div>

无奈中间的元素要设置overflow: hidden; *zoom: 1; 父元素要清除浮动, 要么都定宽, 要么中间的不定宽

布局出现变化, 需要各种定宽或者改变宽度的情况, 抓狂了么?

何不这样:
<div class="row">

<div class="sidebar float_left">
</div>

<div class="content">

<div class="content">
</div>

<div class="sidebar float_right">
</div>

</div>

</div>

.row 上清除浮动
.content: overflow: hidden; *zoom: 1; 无需定宽, 无需清除浮动
.sidebar 上设定 margin 视情况而进行浮动, 可以通过.float_left 这样的类辅助

再加一栏, 一样, 套一个即可

写一套样式, 可以有好几套布局

jjplay

2013-07-31 18:54:18 +08:00

一个简单的例子就是酱紫的，
<div 我不浮动>

<div 我浮动啦> xxx </div>

</div>

这样外层不浮动的div 就会无法包裹住里面的，里面的溢出，这时候需要在外层 clearfix一下

NemoAlex

2013-07-31 21:07:40 +08:00

一直在用的是这个 clearfix：
http://h5bp.com/q
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.clear { clear: both; }

83f420984

2013-07-31 22:30:25 +08:00 via Android

@DaniloSam
@NemoAlex
@jjplay 感谢解答啊

DaniloSam

2013-08-01 16:50:22 +08:00

第三条, overflow: auto;是默认属性, 怎么可能会清除浮动?

我上面写的已经包括了你这问的答案了

bzw875

2013-12-29 23:04:17 +08:00

@aggron 我用了你这个但是不理解啊
.clearfix{*zoom:1} [IE缩放为1]

.clearfix:before, .clearfix:after{
display:table; [块级表格来显示]
line-height:0; [行高为0]
content:"" [输出内容“空”]
}

.clearfix:after{clear:both} [清除浮动]

————这个怎么就能清除浮动了？
PS不是来挖坟的，就是不理解。

83f420984

2013-12-31 16:47:35 +08:00

@bzw875
.clearfix{*zoom:1} [IE缩放为1] 这个不是缩放为1 ，是触发IE的layout.

.clearfix:before, .clearfix:after{
display:table; [块级表格来显示]
line-height:0; [行高为0]
content:"" [输出内容“空”]
}
我理解的是在在清除浮动容器的前面和后分别加入了一个“空元素”，你用过<div class="clear"></div>清除浮动么？上面的意思只不把这个标签只不过把这个标签“透明化了”。说的不对请指点