当前位置：首页 > news >正文

CSS布局（上）：浮动基础

news 2025/6/3 15:29:36

CSS布局（上）：浮动基础

@jarringslee

在前端开发中，CSS布局是构建网页结构的关键技术。对于初学者来说，理解浮动（Float）布局和Flexbox（弹性盒子）布局的原理与应用，是掌握静态页面设计的基础。这两种布局方式在网页设计中广泛应用，其中浮动布局是一种传统的布局技术，而Flexbox布局则提供了一种更灵活、更现代的布局方案。

在这篇文章中，我们先来讨论如何使用浮动来布局网络页面。

文章目录

CSS布局（上）：浮动基础
- 浮动布局的基础
- - 浮动布局的原理
  - 浮动布局的语法
  - 浮动布局的常见属性
  - 浮动布局的优缺点
  - 浮动布局的常见问题
- 总结
- - 浮动布局的特点与应用场景
  - 浮动布局的案例
  - - 案例一：两列布局
    - 案例二：三列布局

浮动布局的基础

浮动布局的原理

浮动（Float）是CSS中用于控制元素排列方式的一种布局技术。它允许元素向左或向右移动，直到其外边缘与包含块或另一个浮动元素的外边缘接触。浮动布局常用于创建多列布局、导航栏等。

浮动的作用：浮动可以使元素脱离文档流，向左或向右移动，从而实现水平排列的效果。

浮动布局的语法

selector {float: left|right|none|inherit;
}

left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认值）
inherit：元素继承父元素的float属性值

浮动布局的常见属性

float：规定元素向哪个方向浮动。
clear：规定元素的哪一侧不允许有浮动元素。
- left：不允许左侧有浮动元素
- right：不允许右侧有浮动元素
- both：不允许左右两侧有浮动元素
- none（默认值）：允许两侧都有浮动元素
- inherit：继承父元素的clear属性值

浮动布局的优缺点

优点：实现多列布局简单，兼容性好，支持所有浏览器。
缺点：浮动元素会影响后续元素的布局，需要清除浮动；布局不够灵活，难以实现复杂的对齐和分布。

浮动布局的常见问题

浮动元素脱离文档流：浮动元素会脱离正常的文档流，导致其后的元素可能会上移填充空隙。
父元素塌陷：如果父元素只包含浮动子元素，父元素的高度可能会塌陷为0。解决方法是清除浮动，常用的方法包括：

额外标签法

在父元素内容的最后添加一个空的块级元素（如div或p），设置CSS属性：clear:both / left / right （专门用来清除浮动的属性，分别是清除所有 / 左侧 / 右侧浮动的属性，直接用both就行）
单伪元素法

利用类选择器使用伪元素在父元素内容的最后添加一个空的块级元素。
```
.clearfix::after{content:"";display:block;clear:both;
}
```

常用：双伪元素法

既清除浮动影响也解决了塌陷问题。早期被用作图文混排。

.clearfix::before,	/*before元素解决外边界塌陷问题 */
.clearfix:after{content="";display:table;
}				   
.clearfix::after{	/*after元素清除浮动影响*/clear:both;
}

overflow

父元素添加css属性：overflow:hodden

添加overflow属性命令浏览器检查父级元素的尺寸。此时父级元素不会因为高为0而让浏览器误以为元素不存在而导致脱标。

总结

浮动布局的特点与应用场景

特点：
- 实现简单，兼容性强。
- 适合创建多列布局，如侧边栏和主内容区并排显示。
- 可能引起浮动元素脱离文档流和父元素塌陷问题，需要清除浮动。
应用场景：
- 传统多列布局（如两列、三列布局）。
- 简单的导航栏和列表排列。

浮动布局的案例

案例一：两列布局

目标：创建一个简单的两列布局，左侧为侧边栏，右侧为主内容区。

步骤解析：

设置基本样式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动布局 - 两列布局</title><style>/* 清除浏览器默认样式 */* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Arial, sans-serif;line-height: 1.6; /* 设置行高，提升可读性 */}</style>
</head>
<body><div class="container"><div class="sidebar">侧边栏</div><div class="main-content">主内容区</div></div>
</body>
</html>

实现浮动布局：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动布局 - 两列布局</title><style>* {margin: 0;padding: 0;box-sizing: border-box; /* 使元素的总宽度等于 width + padding + border */}body {font-family: Arial, sans-serif;line-height: 1.6;}.container {width: 80%;margin: 0 auto; /* 水平居中 */border: 1px solid #ccc; /* 添加边框，方便观察布局 */overflow: hidden; /* 清除浮动 */}.sidebar {float: left; /* 侧边栏向左浮动 */width: 20%; /* 设置侧边栏宽度为容器宽度的20% */background-color: #f0f0f0; /* 设置背景颜色 */padding: 15px; /* 添加内边距 */border-right: 1px solid #ccc; /* 添加右侧边框，与主内容区区分 */min-height: 300px; /* 设置最小高度，防止内容过少时布局塌陷 */}.main-content {float: right; /* 主内容区向右浮动 */width: 80%; /* 设置主内容区宽度为容器宽度的80% */background-color: #fff; /* 设置背景颜色 */padding: 15px; /* 添加内边距 */min-height: 300px; /* 设置最小高度，防止内容过少时布局塌陷 */}</style>
</head>
<body><div class="container"><div class="sidebar">侧边栏</div><div class="main-content">主内容区</div></div>
</body>
</html>

清除浮动：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动布局 - 两列布局</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Arial, sans-serif;line-height: 1.6;}.container {width: 80%;margin: 0 auto;border: 1px solid #ccc;overflow: hidden; /* 使用父元素的overflow属性清除浮动 */}.sidebar {float: left;width: 20%;background-color: #f0f0f0;padding: 15px;border-right: 1px solid #ccc;min-height: 300px;}.main-content {float: right;width: 80%;background-color: #fff;padding: 15px;min-height: 300px;}/* 使用伪元素清除浮动 */.clearfix::after {content: "";clear: both;display: table;}</style>
</head>
<body><div class="container clearfix"><div class="sidebar">侧边栏</div><div class="main-content">主内容区</div></div>
</body>
</html>

添加内容和样式优化：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动布局 - 两列布局</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Arial, sans-serif;line-height: 1.6;background-color: #f5f5f5; /* 设置页面背景颜色 */padding: 20px; /* 添加页面内边距 */}.container {width: 80%;margin: 0 auto;background-color: #fff; /* 设置容器背景颜色 */border-radius: 5px; /* 添加圆角边框，提升视觉效果 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */overflow: hidden;}.sidebar {float: left;width: 20%;background-color: #f0f0f0;padding: 20px;border-right: 1px solid #ddd;min-height: 300px;}.sidebar ul {list-style: none; /* 去掉列表默认样式 */}.sidebar li {padding: 8px 0; /* 设置列表项内边距 */border-bottom: 1px solid #ddd; /* 添加底部边框，分隔列表项 */}.sidebar li:last-child {border-bottom: none; /* 去掉最后一个列表项的底部边框 */}.main-content {float: right;width: 80%;padding: 20px;min-height: 300px;}.article {margin-bottom: 20px; /* 设置文章之间的间距 */padding-bottom: 20px; /* 设置文章底部内边距 */border-bottom: 1px solid #eee; /* 添加底部边框，分隔文章 */}.article:last-child {border-bottom: none; /* 去掉最后一章文章的底部边框 */margin-bottom: 0; /* 去掉最后一章文章的底部外边距 */padding-bottom: 0; /* 去掉最后一章文章的底部内边距 */}.clearfix::after {content: "";clear: both;display: table;}</style>
</head>
<body><div class="container clearfix"><div class="sidebar"><h2>侧边栏导航</h2><ul><li><a href="#">首页</a></li><li><a href="#">文章列表</a></li><li><a href="#">关于作者</a></li><li><a href="#">联系方式</a></li></ul></div><div class="main-content"><div class="article"><h2>栈和队列基础</h2><p>这篇文章的内容将在这里展示。可以添加任意长度的文字内容，布局会自动调整。</p></div><div class="article"><h2>二叉树基础</h2><p>这是另一篇文章的内容。通过浮动布局，侧边栏和主内容区可以并排显示。</p></div></div></div>
</body>
</html>

案例二：三列布局

目标：创建一个三列布局，左侧为导航栏，中间为主内容区，右侧为附加信息栏。

步骤解析：

设置基本样式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动布局 - 三列布局</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Arial, sans-serif;line-height: 1.6;background-color: #f5f5f5;padding: 20px;}</style>
</head>
<body><div class="container"><div class="left-sidebar">左侧导航栏</div><div class="main-content">主内容区</div><div class="right-sidebar">右侧附加信息栏</div></div>
</body>
</html>

实现浮动布局：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动布局 - 三列布局</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Arial, sans-serif;line-height: 1.6;background-color: #f5f5f5;padding: 20px;}.container {width: 80%;margin: 0 auto;background-color: #fff;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);overflow: hidden;}.left-sidebar {float: left;width: 20%;background-color: #f0f0f0;padding: 20px;border-right: 1px solid #ddd;min-height: 300px;}.main-content {float: left;width: 60%;padding: 20px;min-height: 300px;}.right-sidebar {float: right;width: 20%;background-color: #f9f9f9;padding: 20px;border-left: 1px solid #ddd;min-height: 300px;}</style>
</head>
<body><div class="container"><div class="left-sidebar">左侧导航栏</div><div class="main-content">主内容区</div><div class="right-sidebar">右侧附加信息栏</div></div>
</body>
</html>

添加内容和样式优化：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动布局 - 三列布局</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Arial, sans-serif;line-height: 1.6;background-color: #f5f5f5;padding: 20px;}.container {width: 80%;margin: 0 auto;background-color: #fff;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);overflow: hidden;}.left-sidebar {float: left;width: 20%;background-color: #f0f0f0;padding: 20px;border-right: 1px solid #ddd;min-height: 300px;}.left-sidebar ul {list-style: none;}.left-sidebar li {padding: 8px 0;border-bottom: 1px solid #ddd;}.left-sidebar li:last-child {border-bottom: none;}.main-content {float: left;width: 60%;padding: 20px;min-height: 300px;}.article {margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #eee;}.article:last-child {border-bottom: none;margin-bottom: 0;padding-bottom: 0;}.right-sidebar {float: right;width: 20%;background-color: #f9f9f9;padding: 20px;border-left: 1px solid #ddd;min-height: 300px;}.right-sidebar h3 {margin-bottom: 10px; /* 设置标题与内容之间的间距 */}.right-sidebar p {margin-bottom: 15px; /* 设置段落之间的间距 */}</style>
</head>
<body><div class="container"><div class="left-sidebar"><h2>导航菜单</h2><ul><li><a href="#">首页</a></li><li><a href="#">文章列表</a></li><li><a href="#">热门文章</a></li><li><a href="#">最新评论</a></li></ul></div><div class="main-content"><div class="article"><h2>结构体基础</h2><p>这篇文章的内容将在这里展示。可以添加任意长度的文字内容，布局会自动调整。</p></div><div class="article"><h2>双指针基础</h2><p>这是另一篇文章的内容。通过浮动布局，左侧导航栏、主内容区和右侧附加信息栏可以并排显示。</p></div></div><div class="right-sidebar"><h3>最新动态</h3><p>这里是网站的最新动态信息，可以展示最近的更新、活动等内容。</p><h3>联系我们</h3><p>如有任何问题或建议，请通过以下方式联系我们：</p><p>邮箱：jarringslee@mail.com</p><p>电话：12345667899</p></div></div>
</body>
</html>