DIV+CSS网页布局中清除浮动的研究

Research on the floating clearing in DIV + CSS web layout

浮动是CSS的基本定位机制之一,在网页布局中应用非常广泛。本文对浮动引起的父元素高度坍塌现象进行了分析,并提出了clear属性和触发新的BFC两种清除浮动的方法。实验结果表明,在众多触发新的BFC条件中,.clearfix清除浮动的方式在不破坏文档结构的同时,也没有增加太多的代码,在解决浏览器兼容性问题方面也表现突出。

Float is one of the basic positioning mechanisms of CSS and is widely used in web layout. This paper analyzes the phenomenon of parent element height collapse caused by floating, and proposes two methods to clear floating, which are clear attribute and triggering new BFC. The experimental results show that in many new BFC trigger conditions, the .clearfix does not destroy the structure of the document, and also does not add too much code, so it also does well in solving the problem of browser compatibility.