CSS Float(浮动)

什么是 CSS Float(浮动)?

CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。 Float(浮动),往往是用于图像,但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 如果图像是右浮动,下面的文本流将环绕在它左边:
img
{
float:right;
}
实例演示

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。 在这里,我们对图片廊使用 float 属性:
.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}
实例演示

清除浮动 - 使用 clear

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。 使用 clear 属性往文本中添加图片廊:
.text_line
{
clear:both;
}
实例演示

CSS 中所有的浮动属性

"CSS" 列中的数字表示不同的 CSS 版本(CSS1 或 CSS2)定义了该属性。
属性 描述 CSS
clear 指定不允许元素周围有浮动元素。 left right both none inherit 1
float 指定一个盒子(元素)是否可以浮动。 left right none inherit 1

我们需要您的支持

支付宝捐助

捐助记录

  • 操** 5.00 2019-7-18
  • 王** 23.33 2019-7-27
  • 吴** 10.00 2019-7-7
  • 竺** 0.10 2019-7-29
  • 童** 5.00 2019-7-27
  • 高** 10.00 2019-7-13
  • 孙** 10.00 2019-7-11
  • 刘** 1.00 2019-7-3
  • 王** 10.00 2019-7-15
  • 陈** 20.00 2019-7-1
  • 潘** 100.00 2019-7-1
  • 庾** 1.00 2019-7-26
  • 于** 50.00 2019-7-23
  • 李** 10.00 2019-7-23
  • 钟** 20.00 2019-7-26
  • 毛** 1.00 2019-7-23
  • 许** 10.00 2019-7-7
  • 吕** 0.80 2019-7-30
  • 爱心会员 0.29 2019-7-2
  • 郭** 10.00 2019-7-24
  • 贾** 20.00 2019-7-23
  • 李** 20.00 2019-7-8
  • 张** 1.00 2019-7-19
  • 陈** 10.00 2019-7-29
  • 黄** 20.00 2019-7-3
  • 时** 0.10 2019-7-2
  • 魏** 10.00 2019-7-5
  • 李** 0.70 2019-7-28
  • 冯** 0.30 2019-7-24
  • 石** 10.00 2019-7-30
  • 陈** 20.00 2019-7-15
  • 何** 20.00 2019-7-11
  • 成** 0.10 2019-7-27
  • 赵** 10.00 2019-7-21
  • 刘** 5.00 2019-7-10

扫一扫关注

Web前端中国