为何要革除浮动?如何革除?(float)
再解释下就是在规范流下面一个父p没有设定高度属性,那么它的高度就会被子元素的高度撑开。但是要是这个父p中的子元素是浮动的话,要是父p下面再有
一个兄弟p,那么这个兄弟p就会遮挡这个父元素。这个现象也叫浮动溢出。
示例
Document 父p
子p
子p
运转效果
1、额外标签法
通过在浮动元素末尾增加一个空的标签,例如
我们在上面的代码增加
父p
子p
子p
运转效果
完善解决了。
长处 通俗易懂,书写利便。
缺陷 增加无心义的标签,构造化较差。
2、父级增加overflow属性办法
可以通过触发BFC的方式,可以实现革除浮动结果。(BFC背面会讲)
可以给父级元素增加: overflow为 hidden|auto|scroll 都可以实现。
我们将上面代码修改为
子p
子p
也是能实现去掉浮动的结果。
长处 代码简约
缺陷 内容增多时候容易造成不会主动换行致使内容被隐蔽掉,没法显示需要溢出的元素。
3、运用after伪元素革除浮动
:after 方式为空元素的升级版,益处是不消独自加标签了**
示例
运用after伪元素革除浮动
长处 相符闭合浮动思想 构造语义化准确
缺陷 因为IE6-7不支撑:after,运用 zoom:1触发 hasLayout。
注意: content:"." 里面尽量跟一个小点,或者其他,尽量不要为空,不然再firefox 7.0前的版本会有生成空格。
4、运用before和after双伪元素革除浮动
运用办法 将上面的clearfix样式替代成如下
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
长处 代码更简约
缺陷 因为IE6-7不支撑:after,运用 zoom:1触发 hasLayout。
5、总结
1、在网页主要布局时运用:after伪元素办法并作为主要清算浮动方式.文档构造更加清晰; 2、在小模块如ul里举荐运用overflow:hidden;(同时留神可能发生的隐蔽溢出元素题目);
本文来自百分百源码网,CSS教程栏目,欢送学习
以上就是为何要革除浮动?如何革除?(float)的细致内容,更多请关注 百分百源码网 其它相干文章!