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

[83f420984]

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

[thinkxen]

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

[airyland]

麻烦自己google

[chshouyu]

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

[aggron]

.clearfix{*zoom:1}

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

.clearfix:after{clear:both}

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

[83f420984]

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

[Perry]

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

[DaniloSam]

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

你一定是这样布局的吧

<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]

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

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

</div>

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

[NemoAlex]

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

[83f420984]

@DaniloSam
@NemoAlex
@jjplay 感谢解答啊

[DaniloSam]

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

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

[bzw875]

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

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

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

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

[83f420984]

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

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