清理浮动的几种方法以及对应规范说明

Author : lovecicy

原文:http://w3help.org/zh-cn/casestudies/001 作者:钱宝坤   前言 浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间,这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是,由于浮动特性,容器如果没有明确设定高度,会依照普通流内元素高度设置,这样就会导致脱离普通流的浮动元素溢出容器,影响其后元素布局。 我们将现有已知的清楚浮动元素方法罗列下: 采用一个HTML标签,以及css的clear属性,来手工清理浮动; 采用伪类:after,动态建立一个块元素,设定 clear 属性,清理之前的浮动元素; 采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素; 采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素; 使用 TABLE 以及 TD 标签作为浮动元素容器; 采用 float:le[Read More]

standard