浮动布局基础

学习

浮动布局基础

2026-02-23/0/ 编辑

浮动布局基础

1. 概念

网页布局的本质是:用 CSS 来摆放盒子,把盒子摆放到页面对应的位置。

在 CSS 中提供了以下几种不同的布局策略来实现页面的布局:

  1. 正常布局流
  2. 浮动布局
  3. 定位布局
  4. 表格布局 (display: table)
  5. 响应式设计
  6. 弹性布局
  7. 网格布局
  8. 多列布局

以上每种布局方式,都有自己的用途,也有各自的优缺点,相互辅助。

2. 正常布局流(Normal Flow)

2.1 概念

正常布局流(normal flow)是指:

  • 在不对页面进行任何布局控制时,浏览器默认的 HTML 布局方式
  • HTML 元素有块级元素和内联元素
  • 更简单直白的理解,正常布局流就是规定了,在默认情况下块级元素和内联元素的排版方式

2.2 块级元素的排列方式

块级盒子会从包含块的顶部开始,按序垂直排列:

  • 同级盒子间的垂直距离会由 margin 属性决定
  • 相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则
div {
  /* 默认垂直排列 */
  margin: 10px;
}

2.3 内联元素排版方式

内联元素盒子的排列方式:

  • 盒子会从包含块的顶部开始,按序水平排列
  • 只有水平外边距(垂直方向无效)、边框和内边距会被保留
  • 这些盒子可以以不同的方式在垂直方向对齐:底部对齐、顶部对齐、文字底部对齐
span {
  /* 默认水平排列 */
  margin: 0 10px;
}

3. 浮动布局

3.1 浮动布局起源

最初引入 float 属性是为了能让 Web 开发人员实现简单的布局,包括在一列文本中浮动的图像,文字环绕在它的左边或右边。

但 Web 开发人员很快意识到,任何东西都可以浮动,而不仅仅是图像,所以浮动的使用范围扩大了。

3.2 浮动是如何工作的

把一个元素"浮动"(float)起来,会改变该元素本身和在正常布局流(normal flow)中跟随它的其他元素的行为:

  • 元素会浮动到左侧或右侧
  • 从正常布局流(normal flow)中移除
  • 其他的周围内容就会在这个被设置浮动(float)的元素周围环绕

简单理解:

当元素添加了浮动后,元素就会脱离文档流,按照指定方向(左右)发生移动,遇到父级边界或者相邻的浮动元素就会停下来,同时会影响到它后面元素的排版行为。

术语:

  • 文档流: 文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)
  • 脱离文档流: 元素相当于漂浮起来,不占据页面中的位置

3.3 浮动的本质和要点

浮动的本质功能: 用来实现并排

浮动使用要点:

  • 要浮动,并排的盒子都要设置浮动
  • 父盒子要有足够的宽度,否则子盒子会掉下去

示例: 浮动并排

.box {
  width: 600px;
  height: 200px;
  border: 1px solid #000;
}

.box .c1 {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  float: left;
}

.box .c2 {
  width: 200px;
  height: 200px;
  background-color: gold;
  float: left;
}

.box .c3 {
  width: 200px;
  height: 200px;
  background-color: pink;
  float: left;
}
<div class="box">
  <div class="c1">float: left;</div>
  <div class="c2">float: left;</div>
  <div class="c3">float: left;</div>
</div>

3.4 如何产生浮动

给需要浮动的元素添加 float 属性:

属性值说明
none默认值,元素不浮动
left元素向左浮动
right元素向右浮动
inherit规定应该从父元素继承 float 属性的值(一般不用,了解即可)

4. 元素浮动的特性

4.1 元素添加浮动后,脱离文档流

特性: 同时会影响其后面的元素,但不影响它前面的元素

示例

.box {
  width: 300px;
  height: 200px;
  border: 2px solid red;
}

.box1 {
  width: 100px;
  height: 50px;
  background-color: khaki;
}

.box2 {
  width: 200px;
  height: 50px;
  background-color: rgb(133, 206, 235);
  float: left;  /* 添加浮动 */
}

.box3 {
  width: 100px;
  height: 100px;
  background-color: pink;
}
<div class="box">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
</div>

效果:

  • 蓝色 div 加了浮动后,相当于漂浮起来,不占据页面空间
  • 粉色盒子的位置发生改变,移动到上面来
  • 蓝色的盒子相当于漂浮在红色的上面
  • 黄色的盒子不受任何影响

4.2 父元素宽度不够

特性: 子元素在放不下的情况下会换行显示

示例

.main {
  width: 240px;
  height: 150px;
  background-color: khaki;
}

.box {
  width: 50px;
  height: 50px;
  background-color: skyblue;
  margin: 10px;
  float: left;
}
<div class="main">
  <div class="box">框1</div>
  <div class="box">框2</div>
  <div class="box">框3</div>
  <div class="box">框4</div>
</div>

4.3 浮动的顺序贴靠特性

特性: 子盒子会按顺序进行贴靠,如果没有足够空间,则会寻找在前一个兄弟元素

示例

.box {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
}

.box .c1 {
  width: 200px;
  height: 100px;
  background-color: orange;
  float: left;
}

.box .c2 {
  width: 100px;
  height: 50px;
  background-color: skyblue;
  float: left;
}

.box .c3 {
  width: 100px;
  height: 50px;
  background-color: tomato;
  float: left;
}
<div class="box">
  <div class="c1"></div>
  <div class="c2"></div>
  <div class="c3"></div>
</div>

效果: c3 会贴靠在 c1 的下面,因为 c2 占据了 c1 右侧的空间。

4.4 元素浮动后,具有行内块级元素特性

特性:

  • 浮动的元素不再区分块级元素、行内元素,已经脱离了标准文档流
  • 一律能够设置宽度和高度,即使它是 span 标签或 a 标签等

示例

span {
  width: 100px;
  height: 30px;
  background-color: tomato;
  /* 只要设置了浮动的元素,不再区分块级元素和行内元素 */
  /* 都能设置高度和宽度 */
  float: left;
  margin-right: 10px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
<body>
  <h1>浮动的元素一定能设置宽高</h1>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</body>

右浮动:

  • float: right; 即可设置右浮动
  • 实际工作中,右浮动没有左浮动用的多
  • 原理同左浮动

4.5 浮动的元素会造成父元素高度塌陷

特性:

  • 当给子元素添加了浮动后,子元素相当于漂浮起来,不占据页面空间
  • 这样就造成父级元素在没有设置高度时,高度塌陷问题

示例

.main {
  width: 200px;
  border: 2px solid red;
}

.item {
  width: 100px;
  height: 100px;
  background-color: pink;
  float: left;  /* 添加浮动 */
}
<div class="main">
  <div class="item"></div>
</div>

效果: 父元素高度塌陷,只有边框可见

解决方案: 见后续"清除浮动"章节

4.6 浮动对文字的影响

特性:

  • 常见的图片文字环绕效果,其实现方式主要是将图片左浮动或右浮动
  • 浮动后其相邻的文字,就会环绕图片排列

示例

.box {
  width: 200px;
  background-color: #ddd;
  padding: 10px;
}

.img {
  width: 80px;
  height: 80px;
  background-color: skyblue;
  float: left;
  margin: 10px;
}
<div class="box">
  <div class="img"></div>
  最初,引入float属性是为了能让 web 开发人员实现简单的布局,包括在一列文本中浮动的图像,文字环绕在它的左边或右边
</div>

4.7 使用浮动实现网页布局

要点:

  • 垂直显示的盒子,不要设置浮动,只有并排显示的盒子才要设置浮动
  • 每一个盒子都是独立存在,每个盒子中又是一个小天地,内部可以继续使用浮动

5. 总结

浮动布局基础关键要点:

  1. 布局策略:

    • 正常布局流(默认)
    • 浮动布局(并排)
    • 定位布局(精确定位)
    • 其他布局(Flex、Grid 等)

  2. 正常布局流:

    • 块级元素: 垂直排列
    • 内联元素: 水平排列

  3. 浮动工作原理:

    • 脱离文档流
    • 按指定方向移动
    • 遇到边界或相邻浮动元素停止
    • 影响后面元素的排版

  4. 浮动七大特性:

    • 脱离文档流
    • 父元素宽度不够会换行
    • 顺序贴靠特性
    • 具有行内块级元素特性
    • 造成父元素高度塌陷
    • 对文字有环绕效果
    • 可用于网页布局

  5. 浮动属性值:

    • none: 不浮动
    • left: 左浮动
    • right: 右浮动

记住: 浮动主要用于实现元素并排,但需要注意清除浮动解决父元素高度塌陷问题!

猜你喜欢