float、clear、overflow、:after
方法一:使用带clear属性的空元素 在浮动元素后使用一个空元素并在CSS中赋予clear:both属性即可清理浮动。 优点:简单,代码少,浏览器兼容性好。 缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。
方法二:使用CSS的overflow属性 给浮动元素的容器添加overflow:hidden或overflow:auto可以清除浮动, 另外在IE6中还需要触发hasLayout,例如为父元素设置容器宽高或设置zoom:1。 在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
方法三:给浮动的元素的容器添加浮动 给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。
方法四:使用邻接元素处理 什么都不做,给浮动元素后面的元素添加clear属性。
方法五:使用CSS的:after伪元素 结合:after伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack, 可以完美兼容当前主流的各大浏览器,这里的IEhack指的是触发hasLayout。