热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

清楚浮动的几种常用方法

慕课网学习总结集同学的总结浮动会让元素塌陷。即被浮动元素的父元素不具有高度。脱离了普通的文档流,不再占用原来文档中的位置,因此无法把父div撑开。例如一个父元素包含了浮动元素,它将塌

慕课网学习总结

集同学的总结

浮动会让元素塌陷。即被浮动元素的父元素不具有高度。脱离了普通的文档流,不再占用原来文档中的位置,因此无法把父div撑开。例如一个父元素包含了浮动元素,它将塌陷具有零高度。你可以按以下哪种方法处理:

A。在浮动元素后价格div,设置clear:both ;  (为了解决IE6中div有高度的问题 加这个   height:0; overflow:hidden;)

B.使用clearfix

C.设置父元素浮动

 
同学的总结:

/*------总结:常用的清除浮动的方法。
1、使用空标签清除浮动。我用了很久的一种方法,空标签可以是div标签,也可以是P标签。我习惯用

,够简短,也有很多人用


,只是需要另外 为其清除边框,但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代 码:clear:both。此方法的弊端在于增加了无意义的结构元素。

对于使用额外标签清除浮动(闭合浮动元素),是W3C推荐的 做法。至于使用
元素还是空
可以根据自己的喜好来选(当然你也可以使用其它块级元素)。不过要注意的 是,
本身是有表现的,它会多出一个换行出来,所以要设定它的heigh为0,以隐藏它的表现。所以大多数情况下使用空
比较合 适。

2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto,即可!”zoom:1″用于兼容IE6,也可以用width:100%。

不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面;

3、使用after伪对象清除浮动。 该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像 素;二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为”.”,但我发现为空亦是可以的。


------*/


推荐阅读
author-avatar
memeyun916
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有