2019-11-05

CSS Float 浮动

前言

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

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

1、浮动

float 属性指定一个盒子（元素）是否应该浮动。

属性	描述	CSS	备注	🔗
float	指定一个盒子（元素）是否可以浮动	1		🔗

属性值

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其在文本中出现的位置
inherit	规定应该从父元素继承 float 属性的值

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素浮动后，会把之前占的 “坑” 让出来。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边。

实例

<style>
    img {
        float: right;
    }
</style>

<p>在下面的段落中，我们添加了一个 <b>float: right;</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
    <img src="https://demo.qianchia.com/media/image/demo/demo1.png" width="95" height="95" />
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
</p>

效果

1.1 彼此相邻的浮动元素

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

实例

<style>
    .thumbnail {
        float: left;
        width: 110px;
        height: 90px;
        margin: 5px;
    }
</style>

<h3>图片库</h3>
<p>试着调整窗口，看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo5.png" width="107" height="90">
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo6.png" width="107" height="80">
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo7.png" width="116" height="90">
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo8.png" width="120" height="90">
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo5.png" width="107" height="90">
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo6.png" width="107" height="80">
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo7.png" width="116" height="90">
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo8.png" width="120" height="90">

效果

1.2 水平排列 div

默认的 div 排列是会换行的，如果使用 float 就可以达到水平排列的效果，如果超出了父容器，还会有自动换行的效果。

实例

<style>
    #floatingDiv {
        width: 200px;
    }
    
    #floatingDiv div {
        float: left;
    }
</style>

<div>菜单1</div>
<div>菜单2</div>
<div>菜单3</div>
 
<div id="floatingDiv">
    <div>菜单4</div>
    <div>菜单5</div>
    <div>菜单6</div>
    <div>菜单7</div>
    <div>菜单8</div>
</div>

效果

菜单1

菜单2

菜单3

菜单4菜单5菜单6

菜单7菜单8

2、清除浮动

clear 属性指定段落的左侧或右侧不允许浮动的元素。

属性	描述	CSS	备注	🔗
clear	指定不允许元素周围有浮动元素	1		🔗

属性值

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧均不允许浮动元素
none	默认值。允许浮动元素出现在两侧
inherit	规定应该从父元素继承 clear 属性的值

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

实例

<style>
    .thumbnail {
        float: left;
        width: 110px;
        height: 90px;
        margin: 5px;
    }
    .text_line {
        clear: both;
        margin-bottom: 2px;
    }
</style>

<h3>图片库</h3>
<p>试着调整窗口，看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo5.png" width="107" height="90">
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo6.png" width="107" height="80">
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo7.png" width="116" height="90">
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo8.png" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo5.png" width="107" height="90">
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo6.png" width="107" height="80">
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo7.png" width="116" height="90">
<img class="thumbnail" src="https://demo.qianchia.com/media/image/demo/demo8.png" width="120" height="90">