CSS Float 浮动

前言

  • CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

  • Float(浮动),往往是用于图像,但它在布局时一样非常有用。

属性 描述 CSS 备注 🔗
float 指定一个盒子(元素)是否可以浮动 1 🔗
clear 指定不允许元素周围有浮动元素 1 🔗

1、浮动

  • float 属性指定一个盒子(元素)是否应该浮动。
属性 描述 CSS 备注 🔗
float 指定一个盒子(元素)是否可以浮动 1 🔗
  • 属性值
描述
left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动,并会显示在其在文本中出现的位置
inherit 规定应该从父元素继承 float 属性的值
  • 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。

  • 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

  • 浮动元素之后的元素将围绕它。

  • 浮动元素之前的元素将不会受到影响。

  • 如果图像是右浮动,下面的文本流将环绕在它左边。

  • 实例

    1
    2
    3
    4
    5
    <style>
    img {
    float: right;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <p>在下面的段落中,我们添加了一个 <b>float: right;</b> 的图片。导致图片将会浮动在段落的右边。</p>
    <p>
    <img src="https://demo.qianchia.com/media/image/demo1.png" width="95" height="95" />
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    </p>
  • 效果

1.1 彼此相邻的浮动元素

  • 把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
    .thumbnail {
    float: left;
    width: 110px;
    height: 90px;
    margin: 5px;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <h3>图片库</h3>
    <p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo5.png" width="107" height="90">
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo6.png" width="107" height="80">
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo7.png" width="116" height="90">
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo8.png" width="120" height="90">
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo5.png" width="107" height="90">
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo6.png" width="107" height="80">
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo7.png" width="116" height="90">
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo8.png" width="120" height="90">
  • 效果

2、清除浮动

  • clear 属性指定段落的左侧或右侧不允许浮动的元素。
属性 描述 CSS 备注 🔗
clear 指定不允许元素周围有浮动元素 1 🔗
  • 属性值
描述
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
none 默认值。允许浮动元素出现在两侧
inherit 规定应该从父元素继承 clear 属性的值
  • 元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
    .thumbnail {
    float: left;
    width: 110px;
    height: 90px;
    margin: 5px;
    }
    .text_line {
    clear: both;
    margin-bottom: 2px;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <h3>图片库</h3>
    <p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo5.png" width="107" height="90">
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo6.png" width="107" height="80">
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo7.png" width="116" height="90">
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo8.png" width="120" height="90">
    <h3 class="text_line">第二行</h3>
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo5.png" width="107" height="90">
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo6.png" width="107" height="80">
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo7.png" width="116" height="90">
    <img class="thumbnail" src="https://demo.qianchia.com/media/image/demo8.png" width="120" height="90">
  • 效果

3、CSS 实例

文章目录
  1. 1. 前言
  2. 2. 1、浮动
    1. 2.1. 1.1 彼此相邻的浮动元素
  3. 3. 2、清除浮动
  4. 4. 3、CSS 实例
隐藏目录