浮动——float 图文详解

浮动——float

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动——float 图文详解
float: right

浮动——float 图文详解
.k1{ float: left }
.k>div{float: left}

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
浮动——float 图文详解
浮动——float 图文详解

浮动的缺点

浮动——float 图文详解
浮动——float 图文详解
浮动——float 图文详解

清楚浮动

1、给父元素加高度
浮动——float 图文详解
浮动——float 图文详解
2、给浮动的下一个元素加 clear:both
浮动——float 图文详解
浮动——float 图文详解
3、万能清除浮动

浮动——float 图文详解
浮动——float 图文详解