本文详细介绍了CSS布局中的流式布局、浮动布局和层布局。流式布局是最简单的布局方式，但功能有限。浮动布局主要用于让元素并排显示，如字围效果和圣杯布局。层布局则是通过定位实现更复杂的网页设计，包括相对定位、绝对定位和固定定位。浮动元素会对父元素和兄弟元素产生影响，需要通过各种方法清除这些影响。最后，文章还讨论了浮动元素的特性，如贴靠性和高度塌陷问题。
文章目录
前言
布局：所谓的布局，就是指把一个盒子放在合适的位置。
在CSS2.0中，有三大布局：
（1）流式布局：最简单，我的盒子默认的布局.
（2）浮动布局：会难一点，在写PC端网页时，浮动布局还是主流，后面说CSS3时，还会讲一种布局方案，叫flex布局。
（3）层布局：定位
提示：以下是本篇文章正文内容，下面案例可供参考
一、标准文档流
整个html标签，就是一个BFC:块格式化上下文 (Block Formatting Context) （后面再细说BFC），每一个BFC都是彼此独立。
其中html标签形成的BFC，规定了，男盒子需要独占一行，女盒子和人妖盒子需要并排显示，满一行也会自动换行。
默认是从上到下，从左到右进行布局，这就形成一个标准的文档流。
二、三种布局方式
1.流式布局
流式布局按标准文档流进行布局的，也是默认的布局方式，这种布局方案，是最简单的一种布局方案。
**缺点：**功能太弱。
如果只使用流式布局，并不能完成复杂页面的开发。因为复杂页面中有很多的男盒子，需要并排显示。
2.浮动布局
为了让男盒子可以并排显示，此时，就需要使用浮动布局。浮动发明的原因，刚开始是让文字环绕浮动的元素，形成字围效果。
标准文档流规定：
1）男盒子需要独占一行，女盒子和人妖盒子需要并排显示，满一行也会自动换行。
2）默认是从上到下，从左到右进行布局，这就形成一个标准的文档流。
- 如果一个元素浮动了，它会半脱离标准文档流，或者说，标准文档流中的规定，有些就不再适合。
- 如果说，img完全脱离了标准文档流，后面的元素就会向上钻。img会覆盖到文字上面的。测试发现，发现，文字并没有钻到img后面的，说明，这个图片，并没有完全脱离标准文档流。
- 这种情况，叫字围效果。 就是文字围绕浮动的元素。发明浮动时，就是为了实现字围效果。
- 后来，发现，浮动，可以让男盒子并排显示，慢慢地，我们都使用浮动，让男盒子并排显示。
- 脱离标准文档流：（1） 半脱离（2） 完全脱离
（1）字围效果
例：字围效果代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0; padding: 0; }
.box{
width: 400px;
height: 400px;
border: 2px solid red;
}
.box img{
/* 让img浮动起来 */
float: left;
}
</style>
</head>
<body>
<div class="box">
<!-- src指定远程图片 -->
<!-- width="200" 它的高度会等比例缩放 -->
<!-- 人妖标签 -->
<img width="300" src="http://www.xinhuanet.com/photo/2021-03/14/1127209576_16157161876421n.jpg" alt="">
<!-- 男标签 p标签里面的文本满一行会自动换行 -->
<p>3月14日，秧歌队员在山东省惠民县皂户李镇表演。惠民县泥塑历史悠久，农历二月初二有捏泥塑、跑秧歌的传统。当日是农历二月初二，人们在丰富多彩的民俗活动中欢庆传统节日。新华社记者 范长国 摄</p>
</div>
</body>
</html>
字围效果：
（2）圣杯布局
典型的一种布局方式：圣杯布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0; padding: 0; }
.wrapper{
width: 800px;
height
最低0.47元/天 解锁文章
1197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
