1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

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

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/ExbqZWK?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

需要注意的是, 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 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>

$$

首字下沉

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

<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 的浮动。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/XWzvMOY?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

对于父元素

一个元素如果设置了浮动便会脱离页面文档流,导致不会占据页面空间,如下例中,父元素 .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>

$$

设置父元素的 overflowhiddenauto 可以使父元素能够被 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 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>

$$

两端对齐

浮动最常应用的一个场景就是使得我们的元素对齐到两端,比如常见的导航栏,其 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

<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>

$$