CSS浮动

满分观察网友z

已于 2024-03-24 08:16:38 修改

阅读量1.2k

点赞数 27

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 前端

于 2024-03-18 09:30:34 首次发布

本文链接：https://blog.youkuaiyun.com/dongxiaod1/article/details/136797978

CSS 专栏收录该内容

17 篇文章

订阅专栏

文章目录

1. 文档流
2. 浮动简介
3. 浮动元素特点
4. 浮动属性
5. 浮动小练习
6. 个人简历页面布局
- 6.1. 方式一
- 6.2. 方式二
7. 清除浮动
- 7.1. 影响
- 7.2. 解决方式

1. 文档流

也叫标准流，行内元素可以水平排布，块级元素一般垂直排布。

2. 浮动简介

在最初，浮动是用来实现文字环绕图片效果的，也就是图文混排，现在浮动是主流的页面布局方式之一。

3. 浮动元素特点

脱离文档流(浏览器的标准流)，在文档流中不占位置，相当于飘起来。
不管浮动前是什么元素，浮动后的默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。可以不用添加 display:block 属性。
浮动元素比文档流级别高，会覆盖文档流的元素。
不会独占一行，可以与其他元素共用一行，也就是实现了水平排布。
不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
解决了行内块间隙的产生。
浮动元素会受上面元素边界的影响，可以将上面元素设置为行内块元素，最好的方式是让上面的元素也浮动起来。

4. 浮动属性

属性名	作用
float 设置浮动	left : 设置左浮动 right : 设置右浮动 none ：不浮动，默认值
clear 清除浮动	left ：清除前面左浮动的影响 right ：清除前面右浮动的影响 both ：清除前面左右浮动的影响

5. 浮动小练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>10-浮动练习</title>
    <style>
      .container {
        width: 400px;
        height: 300px;
        padding: 10px;
        border: 1px solid #999;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: #b3d1bb;
      }
      .box3 {
        width: 100px;
        height: 100px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <div class="box3">box3</div>
    </div>
  </body>
</html>

5.1. 练习 1

box1 向右浮动，效果如下

.box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
  float: right;
}

5.2. 练习 2

box1 左浮动，效果如下

.box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
  float: left;
}

这里的 box2文本被 box1 挤到了 box3 下面，和 box3 文本重合，但是 box2 盒子被 box1 盒子覆盖了，这里可以调整 box2 盒子的宽度验证。

5.3. 练习 3

所有 box 都浮动，效果如下

5.4. 练习 4

所有 box 浮动后，box3 落下来，效果如下

.container {
  width: 200px;
  height: 300px;
  padding: 10px;
  border: 1px solid #999;
}

这是因为父元素的宽度不够了，box3 只能往下一行排列。

5.5. 导航条案例改进

5.5.1. 改进前

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.5.2. 浮动改进后

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>11-浮动应用-导航条案例-使用浮动改进</title>
    <style>
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      ul li {
        /* display: inline-block; */
        float: left;
      }
      li a {
        /* 布局属性 */
        display: inline-block;

        /* 尺寸属性 */
        height: 60px;

        /* 背景属性 */
        background-color: pink;

        /* 盒子模型属性 */
        padding: 0 20px;

        /* 其他样式 */
        text-align: center;
        line-height: 60px;
        text-decoration: none;
        color: white;
      }
      ul li a:hover {
        background: #b3d1bb;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">新闻1</a></li>
      <li><a href="#">新闻2</a></li>
      <li><a href="#">新闻3</a></li>
      <li><a href="#">新闻4</a></li>
      <li><a href="#">新闻5</a></li>
    </ul>
  </body>
</html>

5.6. 浮动练习

用浮动实现以下网页的顶部导航。

解决li竖排的问题，使用float。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>12-浮动练习-网页顶部导航栏</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      ul,
      li {
        list-style: none;
      }
      .wrapper {
        width: 100vw;
        height: 100vh;
        /* 放一张自己喜欢的照片 */
        background-image: url(./img/banner.jpg);
        background-size: cover;
        padding: 0px 200px;
        color: blue;
      }

      .logo {
        margin: 20px;
        color: aliceblue;
        float: left;
      }

      .menu {
        margin: 20px;
        color: rgb(231, 238, 251);
        float: right;
      }

      /* 解决li竖排的问题，使用float */
      .menu > li {
        margin: 0 20px;
        float: left;
        cursor: pointer;
      }

      .menu > li:hover {
        color: pink;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="logo">LOGO</div>
      <ul class="menu">
        <li>首页</li>
        <li>关于</li>
        <li>我的</li>
        <li>联系</li>
      </ul>
    </div>
  </body>
</html>

6. 个人简历页面布局

6.1. 方式一

通过设置 container 的外边距实现 container 居中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>13-浮动应用-书写个人简历页面布局-方式一</title>
    <style>
      /* 清除默认样式 */
      * {
        margin: 0;
        padding: 0;
      }
      /* 设置背景颜色 */
      body {
        background-color: skyblue;
      }
      /* 版心样式 */
      .container {
        width: 80%;
        height: 100vh;
        /* border: 1px solid #000; */
        margin: 100px auto;
      }
      /* 左边 */
      .container .profile {
        width: 20%;
        height: 300px;
        /* background-color: pink; */
        background-color: white;
        border-right: 2px solid #000;
        box-sizing: border-box;
        float: left;
        border-radius: 5px;
      }
      /* 右边 */
      .container .infomation {
        width: 80%;
        height: 100vh;
        /* background-color: #b3d1bb; */
        background-color: white;
        float: left;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <!-- 版心 -->
    <main class="container">
      <!-- 左边：个人概要 -->
      <aside class="profile"></aside>
      <!-- 右边：详细信息 -->
      <aside class="infomation"></aside>
    </main>
  </body>
</html>

6.2. 方式二

通过设置 body 的内边距实现 container 居中，这里需要注意 container 的宽度设置为100%。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>14-浮动应用-书写个人简历页面布局-方式二</title>
    <style>
      /* 清除默认样式 */
      * {
        margin: 0;
        padding: 0;
      }
      /* 设置背景颜色 */
      body {
        background-color: skyblue;
        padding: 100px 10%;
      }
      /* 版心样式 */
      .container {
        width: 100%;
        height: 100vh;
        /* border: 1px solid #000; */
        /* margin: 100px auto; */
      }
      /* 左边 */
      .container .profile {
        width: 20%;
        height: 300px;
        /* background-color: pink; */
        background-color: white;
        border-right: 2px solid #000;
        box-sizing: border-box; /* 防止设置边框的时候撑大盒子 */
        float: left;
        border-radius: 5px;
      }
      /* 右边 */
      .container .infomation {
        width: 80%;
        height: 100vh;
        /* background-color: #b3d1bb; */
        background-color: white;
        float: left;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <!-- 版心 -->
    <main class="container">
      <!-- 左边：个人概要 -->
      <aside class="profile"></aside>
      <!-- 右边：详细信息 -->
      <aside class="infomation"></aside>
    </main>
  </body>
</html>

7. 清除浮动

7.1. 影响

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

7.2. 解决方式

解决方式一：给父元素指定高度。
解决方式二：给父元素也设置浮动，带来其他影响。
解决方式三：给父元素设置 overflow:hidden 。
解决方式四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
解决方式五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。(推荐使用)

.parent::after {
  content: "";
  display: block;
  clear: both;
}

可以设置为clearfix单独类，然后放到需要使用的标签上。可以实现复用。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

<div class="fater clearfix">
  <div class="son"></div>
</div>

双伪元素清除法：比单伪元素新增了解决margin 塌陷的情况。

在父元素的前面添加一个伪元素,用于解决 margin 塌陷问题。
```
.clearfix::before {
  content: "";
  display: table;
}
```
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

在父元素的后面添加一个伪元素,用于清除浮动。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

改进：将前后伪元素中相同的代码放到一块。

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

解决外边距塌陷情况：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>04-清除浮动影响0-解决外边距塌陷情况</title>
    <style>
      .father {
        width: 200px;
        height: 200px;
        background: pink;
      }
      .son {
        width: 100px;
        height: 100px;
        background: #95a299;

        margin-top: 50px;
      }

      /* 双伪元素 */
      .clearfix::before,
      .clearfix::after {
        content: "";
        display: table;
      }

      .clearfix::after {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="father clearfix">
      <div class="son"></div>
    </div>
  </body>
</html>