float 属性决定了元素是沿左侧或右侧放置，并且允许文本和行内元素环绕它。浮动的元素会脱离网页文档流，但仍会影响浮动和行内元素。有以下取值：

none：默认值，不浮动。
left：浮动在其块容器的左侧。
right：浮动在其块容器的右侧。
inline-start：浮动在块容器的开始一侧，在 ltr 中是左侧，在 rtl 中是右侧。
inline-end：浮动在块容器的结束一侧，在 ltr 中是右侧，在 rtl 中是左侧。

需要注意的是， float 不会占据页面空间，但仍会对浮动的元素互行内元素产生影响。以下的代码中，粉色的元素被设置成浮动，因为脱离了页面文档流，因此第一行内的水鸭蓝的元素与其重叠。而在第二中的水鸭蓝的元素被设置成了 inline-block 行内块元素，因此仍然会被粉色元素影响到。

<div class="container">
    <div class="box"></div>
    <div class="box2"></div>
</div>
<div class="container2">
    <div class="box"></div>
    <div class="box2"></div>
</div>
<style>
    .box {
        width: 50px;
        height: 50px;
        float: left;
        background-color: pink;
    }
    .box2 {
        width: 100px;
        height: 100px;
        background-color: teal;
    }
    .container {
        margin-bottom: 20px;
    }
    .container2 .box2 {
        display: inline-block;
    }
</style>

$$demo

</div>

</div>

<style>

.box {

width: 50px;

height: 50px;

float: left;

background-color: pink;

}

.box2 {

width: 100px;

height: 100px;

background-color: teal;

}

.container {

margin-bottom: 20px;

}

.container2 .box2 {

display: inline-block;

}

</style>

首字下沉

通过浮动可以创造一个环绕的首字下沉的效果，这是一种常见的页面排版。

<p>
    进击的巨人是日本漫画家谏山创创作的漫画作品。漫画于2009年9月至2021年4月间在讲谈社《别册少年Magazine》上连载，单行本全34卷。
    故事建立在人类与巨人之间的冲突，人类居住在由高墙包围的城市，对抗墙外会吃人的巨人，并寻找著关于巨人的答案。
</p>
<style>
    p {
        max-width: 400px;
    }
    p::first-letter {
        font-size: 3em;
        float: left;
        line-height: 1;
    }
</style>

$$demo

<p>

进击的巨人是日本漫画家谏山创创作的漫画作品。漫画于2009年9月至2021年4月间在讲谈社《别册少年Magazine》上连载，单行本全34卷。

故事建立在人类与巨人之间的冲突，人类居住在由高墙包围的城市，对抗墙外会吃人的巨人，并寻找著关于巨人的答案。

</p>

<style>

p {

max-width: 400px;

}

p::first-letter {

font-size: 3em;

float: left;

line-height: 1;

}

</style>

清除浮动

对于同级元素

同级元素间可以设置 clear 属性，设置了 clear 属性的元素会将浮动的元素视为没有浮动的状态。 clear 属性有以下取值：

none：默认值，不清除。
left：清除左浮动。
right：清除右浮动。
both：清除左右浮动。
inline-start：清除 inline-start 的浮动。
inline-end：清除 inline-end 的浮动。

对于父元素

一个元素如果设置了浮动便会脱离页面文档流，导致不会占据页面空间，如下例中，父元素 .container 的高度并没有被子元素撑开，而只是设置的最小高度。

<div class="container">
    <div class="box"></div>
</div>
<style>
    .container {
        background-color: teal;
        width: 150px;
        min-height: 40px;
    }
    .box {
        float: left;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

$$demo

<div class="limit"> <div class="container"> <div class="box"></div> </div> </div> <style> .limit { min-height: 100px; } .container { background-color: teal; width: 150px; min-height: 40px; } .box { float: left; width: 100px; height: 100px; background-color: pink; } </style>

设置父元素的 overflow 为 hidden 或 auto 可以使父元素能够被 float 的子元素撑开。

<div class="container">
    <div class="box"></div>
</div>
<style>
    .container {
        background-color: teal;
        width: 150px;
        min-height: 40px;
        overflow: auto;
    }
    .box {
        float: left;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

$$demo

</div>

<style>

.container {

background-color: teal;

width: 150px;

min-height: 40px;

overflow: auto;

}

.box {

float: left;

width: 100px;

height: 100px;

background-color: pink;

}

</style>

两端对齐

浮动最常应用的一个场景就是使得我们的元素对齐到两端，比如常见的导航栏，其 logo 与菜单往往处于左右两端对齐。

<header class="navigator">
    <div class="left">
        <img class="logo" src="https://3yya.com/logo-mini.png" alt="logo" />
        <span class="name">三眼鸭的编程教室</span>
    </div>
    <div class="right">
        <a class="link" href="https://3yya.com/" target="_blank">首页</a>
        <a class="link" href="https://3yya.com/courseware" target="_blank"
            >课件</a
        >
    </div>
</header>
<style>
    .left {
        float: left;
        height: 60px;
        line-height: 60px;
    }
    .right {
        float: right;
        height: 60px;
        line-height: 60px;
    }
    .navigator {
        padding: 0 10px;
        box-shadow: 0 0 4px #999;
        /* 清除浮动，使得高度能被浮动的子元素撑开 */
        overflow: hidden;
    }

    .link {
        text-decoration: none;
        color: inherit;
        border-radius: 4px;
        padding: 10px 25px;
        vertical-align: middle;
    }
    .link:hover {
        background-color: #eee;
    }
    .logo {
        height: 40px;
        vertical-align: middle;
    }
    .name {
        vertical-align: middle;
    }
</style>

$$demo

<span class="name">三眼鸭的编程教室</span>

</div>

<a class="link" href="https://3yya.com/courseware" target="_blank"

课件</a

</div>

</header>

<style>

.left {

float: left;

height: 60px;

line-height: 60px;

}

.right {

float: right;

height: 60px;

line-height: 60px;

}

.navigator {

padding: 0 10px;

box-shadow: 0 0 4px #999;

/* 清除浮动，使得高度能被浮动的子元素撑开 */

overflow: hidden;

}

.link {

text-decoration: none;

color: inherit;

border-radius: 4px;

padding: 10px 25px;

vertical-align: middle;

}

.link:hover {

background-color: #eee;

}

.logo {

height: 40px;

vertical-align: middle;

}

.name {

vertical-align: middle;

}

</style>