专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > HTML/CSS

clearfix(清除浮动)使用 解决父元素高度坍塌

发布时间: 文章来源:www.iduyao.cn 采编人员:毒药  
一、浮动的概念
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
二、浮动会导致父元素高度坍塌
父元素中有子元素,并且父元素没有设置高度,子元素在父元素中浮动,结果必然是父元素的高度为0,这也就导致了父元素高度塌陷问题。

浮动脱离文档流,这个问题会对整个页面布局带来很大影响,如何解决高度坍塌问题,我们需要清除浮动。

三、:after伪元素
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素之后添加一个看不见的块元素(Block element)清理浮动。

.clearfix:after, .clearfix:before {clear: both; content: " "; display: table;}
.clearfix{zoom:1;}

原理:通过CSS伪元素在容器的内部元素之后添加一个看不见的空格“/20”或点“.” ,并且设置clear属性清除浮动。
优点:浏览器支持较好
缺点:clearfix这个class需要添加zoom: 1(触发haslayout),才能支持IE6和IE7浏览器
建议:推荐使用,设置公共类,减少CSS代码
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
   755阅读
目前尚无回复
登录 后发表评论

热门分类:

Web开发 | Web前端 | HTML/CSS | php | ASP | JavaScript | jQuery | HTML5 | vbScript | Ajax | 网页设计 | 跨浏览器开发 | 高性能WEB开发 | Web Service | XML/SOAP | CGI | 数据库 | SQL | MySQL | NoSQL | Oracle技术 | Oracle管理 | Oracle开发 | Oracle面试 | Oracle Exception | Sql Server | Informix | Sybase | DB2 | Access | VFP | 数据仓库 | 高性能数据库开发 | 其他数据库 | 移动开发 | Android | Iphone | Windows Mobile | Symbian | BlackBerry | QT开发 | Brew | MeeGo | 移动平台 | 电信IT应用开发 | 移动应用 | Java Web开发 | J2EE | J2SE | J2ME | Java面试 | Java相关 | Eclipse | Java Exception | 企业开发 | 企业信息化 | 行业应用 | GIS | SAP | Tivoli | Lotus | Exchange | SharePoint | Dynamics CRM | K2 BPM | 报表 | 嵌入开发 | WinCE | 硬件开发 | 单片机 | 汇编语言 | 驱动开发 | Wireless | VxWorks | 应用服务器 | Apache | IIS | JBoss | WebSphere | Weblogic | ColdFusion | 研发管理 | 项目管理 | 开发过程 | 开发方法 | 软件设计 | 设计模式 | 软件架构设计 | 敏捷开发 | 微创软件开发 | CVS/SVN | VSTS | PowerDesigner | Rational | 软件测试 | C# | ASP.NET | WinForm | WCF | CLR | WPF | XNA | Visual Studio | WinRT Metro | .NET Framework | VB Dotnet | VC | .NET分析设计 | .NET组件控件 | J# | Delphi | .NET报表 | LINQ | .NET新技术 | .NET面试 | .NET相关 | DotNet Exception | Linux/Unix | Solaris | AIX | 多媒体/流媒体开发 | 多媒体设计 | 交互式开发 | Flash | 图形/图像 | 图像工具使用 | Flex | AutoCAD | Silverlight | C++ | C语言 | C++ Builder | 网络通信 | PB | Ruby/Rails | Perl/Python | Erlang | Go | Swift | Verilog | 编程 | 其他开发语言 | Open API | 信息/网络安全 | IBM云计算 | Paypal | VOIP | Google技术 | 人工智能