CSS 浮动 float

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

  • float: none
  • float: left
  • float: right
div{ float:left; }
  • 设置元素浮动后,只能左右移动而不能上下移动
  • 向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框
  • 元素被设置浮动后,display 默认为 inline-block(行内块元素)

CSS - 浮动重叠

元素设置为浮动后,将没有实质空间,所以会跟不浮动的框发生重叠,浮动框在上面。周围的元素会重新排列,行框围绕浮动框。

css_float_1.png

图1

查看图1代码

CSS - 浮动 父元素height为0

向右移动,碰到包含框或另一个浮动框的边框。当元素的子元素全部浮动,则父元素 height 为0。行框围绕浮动框

css_float_3.png

图2

查看图2代码

CSS - 清除浮动 clear

同级元素,使用 clear 来避免周围的元素重新排列。

p{ clear: both; }

css_float_3.png

图3

查看图3代码

overflow 消除行框围绕,清除浮动

CSS - 浮动 头像左浮动

css_float_4.jpg

图4

查看图4代码