CSS的三大布局方式（流式布局，浮动布局和层布局）

article/2025/11/5 13:54:45

文章目录

  • 前言
  • 一、标准文档流
  • 二、三种布局方式
    • 1.流式布局
    • 2.浮动布局
      • （1）字围效果
      • （2）圣杯布局
    • 3.层布局
      • 定位的分类：
      • （1） 相对定位 position:relative
      • （2） 绝对定位 position:absolute
      • （3） 固定定位 position:fixed
      • （4） 静态定位 就是不定位 默认的
  • 三、浮动元素会造成影响：
    • 1.对父元素造成的影响
      • 解决方法
    • 2.对兄弟元素造成的影响
      • 解决方法
  • 四、浮动元素的特性

前言

布局：所谓的布局，就是指把一个盒子放在合适的位置。
在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: 600px; border: 1px solid red; /* auto 表示尽可能大 */margin: 10px auto;}.wrapper .header, .wrapper .footer{width: 800px; height: 100px;background-color: gold;text-align: center;line-height: 100px;}/* 就近原则 */.wrapper .footer{ background-color: skyblue; clear: both;}.wrapper .main .left, .wrapper .main .right{width: 200px;height: 400px;background-color: pink;float: left;}.wrapper .main .right{ background-color: springgreen;}.wrapper .main .center{width: 400px;height: 400px;background-color: rebeccapurple;float: left;}   </style>
</head>
<body><!-- 圣杯整体start --><div class="wrapper"><!-- header start --><div class="header"><h1>header</h1></div><!-- header end --><!-- main start --><div class="main"><div class="left"><h1>left</h1></div><div class="center"><h1>center</h1></div><div class="right"><h1>right</h1></div></div><!-- main end --><!-- footer start --><div class="footer"><h1>footer</h1></div><!-- footer end --></div><!-- 圣杯整体end -->
</body>
</html>

圣杯布局：
在这里插入图片描述
使用浮动的目的：让块级元素可以并排显示。float:left/right/none; 默认就是不浮动。
浮动的元素会以它后面的兄弟元素造成影响，我们要清除这种影响，如何清除？clear:both;
谁受影响了，clear写在谁上面。

  1. 不使用浮动，使用人妖标签，让块级元素并排显示。遇到的问题：特别需要注意标签的换行
  2. 解决：（1）不要有换行（2）font-size：0 换行符的那个间隙也是有font-size来计算出来给对应的父元素设置font-size为0，这样就没有间隙了。但是需要给对应的行内块重新设置font-size。

3.层布局

在开发网页时，有时候，仅仅使用上面的两种布局，并不能完成我们的需求。此时，就需要使用层布局，说白了，就是定位。通过定位使用的布局，叫层布局。

定位的分类：

（1） 相对定位 position:relative

依据原本的位置进行定位，参考点：本身的位置，

问： 只要定位肯定需要设置偏移量。如何设置偏移量？
答： top, left, bottom, right 绝大部分情况下，只会用其中两个

应用场景： 在原本的位置基本上，进行偏移时，可以使用相对定位。

  1. 对一个盒子的位置进行微调。
  2. position:relative 这一行代码还有一个作用，设置绝对定位的参数点。

注意细节：

  1. 相对定位的元素脱离标准文档流，但是它原本的位置还是被自己占用着，别人无法占用。
  2. 不管一个盒子，之前是什么性别，定位完后，还是什么性别。
  3. 当进行了相对定位，基本上都要通过top, left, bottom, right来设置偏移量。
  4. 如果设置了margin也会影响位置。

（2） 绝对定位 position:absolute

绝对定位：格式：position:absolute。

参考点，需要我们自己去设置，写一行代码来设置：position:relative

如果不设置参考点，就一级一级向上找，直到body，最终就以body作为参考点。只要是定位，都要设置偏移量。top、left, right, bottom。 一般我们会给绝对定位的元素的父元素设置成参考点：子绝父相（参考点）。

应用场景： 在原本的位置基本上，进行偏移时，可以使用相对定位。

  1. 让块级元素水平垂直居中。
  2. 在写一些效果时，绝对定位使用的还是比较多，如：轮播图…
  3. 在写动画时，会也使用到绝对定位。

注意细节：

  1. 绝对定位的元素是完全脱离标准文档流。
  2. 一个元素绝对定位后，显示在什么地方，主要看你把参考点设置在了什么地方，如果没有设置，最终就以body作为参考点。
  3. 一个元素绝对定位了，就变性了，女盒子就变成男盒子（行内元素就变成块级元素）。
  4. 绝对定位也需要设置偏移量，有两个方向: left right 另一个方向是top bottom，设置偏移量，一般是两个方向选其一。
  5. 一般情况下，我们是给父元素设置参考点，口决：子绝父相。
  6. 定位完，还可以通过margin调整它的位置。

多个元素都进行了绝对定位，都完全脱离了标准流 ，多个元素可能发生重叠 。默认情况下，后面的元素会覆盖前面的元素 。
使用绝对定位让一个盒子水平居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{ margin: 0; padding: 0; }.father{width: 350px;height: 350px;background-color: gold;position: absolute;/* 是body高度50% */top: 50%;/* 是body宽度的50% */left: 50%;/* 定位的元素，还可以通过margin继续改变它的位置 *//* margin也可以为负值 */margin-top: -175px;margin-left: -175px;}</style>
</head>
<body><div class="father"></div>
</body>
</html>

（3） 固定定位 position:fixed

固定定位： 参考点：是整个浏览器窗口。也需要设置偏移量：top right bottom left。语法： position:fixed。多用于网页的头部区域固定。
注意细节：

  1. 完全脱离标准文档流。
  2. 不管是什么性别的元素，固定定位了，都会就成男的。
  3. 固定定位的参考点是浏览器的窗口，不会随着内容的滚动而滚动。
  4. 对于固定定位，有些低版本浏览器支持并不好，使用的时候，需要考虑兼容性问题。

（4） 静态定位 就是不定位 默认的

三、浮动元素会造成影响：

1）是对父元素造成影响
2）对后面的兄弟元素造成影响

1.对父元素造成的影响

  • 当父元素中的所有元素都浮动了，并且父元素没有设置高度，父元素的高度就会变成0，也叫父元素高度塌陷。
  • 如果造成了影响，我们需要清除这种影响，清除这种影响，我们叫也清除浮动。

例：三个子元素都浮动，且父元素没有设置高度，这种情况，父元素的高度就会塌陷

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.father{ width: 800px; border:2px solid red;}.son1{ width: 100px; float: left; height: 100px;background-color: gold; }.son2{ width: 120px; float: left; height: 70px;background-color: skyblue; }.son3{ width: 220px; float: left; height: 180px;background-color: pink; }</style>
</head>
<body><div class="father"><div class="son1">son1</div><div class="son2">son2</div><div class="son3">son3</div></div>
</body>
</html>

如下：
父元素高度塌陷

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210316165751285.png

解决方法

（1）加高法。手动给父元素加上高度 用的不多。在写页面时，如果说盒子的高度就是靠内容撑起来的，此时，使用加高法，就不适合。

<style>
.father{ width:800px;border:2px solid red; height: 200px;} 
</style>

（2）overflow:hidden 可以让一个盒子形成BFC，overflow:hidden它的本意并不是用来清除浮动，但是它有这么一个作用，可以清除浮动元素对父元素造成的影响，可以把它当前一个小偏方。

<style>
.father{ width: 800px; border:2px solid red; overflow: hidden;} 
</style>

（3）内墙法。代码如下：

<div class="father"><div class="son1">son1</div><div class="son2">son2</div><div class="son3">son3</div><!-- 这个div是专门用来清除浮动造成的影响的 --><!-- clear: both; 用来清除浮动对兄弟元素造成的影响 --><div style="clear: both;"></div> 
</div>

（4）伪元素法。用的最多的一种方法：

<style>
/* 创建一个伪元素  ::after表示在father内部的最后面创建一个元素这个元素就是一个伪元素 */
.father::after{content: "";display: block;clear: both;/* 通常还会加上下面的代码 */font-size: 0;height: 0;/* 是否可见 hidden表示不可见*/visibility: hidden;}
</style>

也可以将清除影响的代码封装成一个类，这样，不管是哪一个元素受影响了，只需要在这个元素上加上这个类名就OK了

<style>.clearFix::after{content: "";display: block;clear: both;font-size: 0;height: 0;visibility: hidden;}
</style>

2.对兄弟元素造成的影响

在一个父元素中，如果box1，box2，box3,都浮动了，没有浮动的box4就会钻上去。

解决方法

clear本意就是清除的意思。
clear:left; 清除左浮动造成的影响
clear:right; 清除右浮动造成的影响 盒子的右浮动使用的并不多
clear:both; 清除左右浮动造成的影响
哪个兄弟受影响了，就需要把这个clear:both写在哪个兄弟上面。

<div style="clear:both;width: 80px;height: 80px; background-color: orange;">box4</div>

四、浮动元素的特性

  1. 贴靠性。一堆浮动的元素，会彼此的贴靠。
  2. 如果父元素宽度变小了，儿子还会具有贴靠性，直到所有的浮动元素贴到父元素的边框。
  3. 如果一个元素浮动了，它也不可能浮动到父元素外面。
  4. 一个元素浮动了，它会自动地“变性”，变成人妖了。女盒子变人妖盒子，男盒子也变。
  5. 浮动元素它是半脱离标准文档流，证明：字围效果。
  6. 在一个父元素中，所有的子元素都浮动了，会造成父元素的高度塌陷。此时，如果父元素也浮动了，高度就不塌陷。（因为浮动的元素会形成BFC）。
  7. 如果一个元素浮动了，就不能使用margin:0 auto; 让一个盒子水平居中了。

http://chatgpt.dhexx.cn/article/2620E3vA.shtml

相关文章

Unity 初识：SkyBox（天空盒）

Unity 初识：SkyBox（天空盒）

概念 天空盒是包裹整个场景的环境效果。 制作天空盒 1、创建材质球。 2、设置材质球Shader为SkyBox。 SkyBox/6 Sided&#xff0c;将六张贴图放到对应位置。 使用天空盒 为场景添加&#xff1a; 方法一、直接将做好的材质拖到场景中。 方法二、菜单栏Window--->Lighting-…
阅读更多...
unity 天空盒介绍

unity 天空盒介绍

天空盒其实很简单&#xff0c;就是直接找贴图&#xff0c;比如网上直接搜 然后将图片导入Unity&#xff0c;把texture shape 改为Cube模式&#xff0c;点击Apply应用即可 当应用之后Unity会自动帮我们生成材质球&#xff0c;直接将材质球拖到Scene场景即可&#xff0c;看到…
阅读更多...
Unity天空盒子设置和基础灯光设置

Unity天空盒子设置和基础灯光设置

选择new Lighting settings来创建一个新的光源 这里可以选择是来自天空盒子的光源还是选择他自己本身的颜色 之后选择使用GPU来渲染
阅读更多...
Unity3D -- 天空盒(图文)

Unity3D -- 天空盒(图文)

1.1、天空盒图片 如果是这样的天空盒图片 直接引入到Unity项目中&#xff0c;在Inspector窗口将Texture Shape修改为Cube&#xff0c;而后保存并应用就行了 1.2、其它图片或整张图片 如果需要将图片等分可通过ps进行处理 选择并使用裁剪工具 &#xff0c;得到如下图 如果图片出…
阅读更多...
小功能⭐️Unity动态更换天空盒、旋转天空盒

小功能⭐️Unity动态更换天空盒、旋转天空盒

文章目录 &#x1f7e5; Unity动态更换天空盒1️⃣ 方法12️⃣ 方法2 &#x1f7e7; 旋转天空盒 &#x1f7e5; Unity动态更换天空盒 1️⃣ 方法1 1、在摄像头上添加SkyBox组件 放到其他地方不管用。 2、创建SkyBox类型的的材质球。放入即可。 3、通过代码&#xff0c;你便可获…
阅读更多...
unity3d场景怎么添加天空盒子?

unity3d场景怎么添加天空盒子?

unity3d场景中想要添加天空盒子&#xff0c;该怎么添加呢&#xff1f;下面我们就来看看详细的教程。 1、先下载组成天空盒子的天空图片 2、把天空图片拖进unity3d中创建的文件夹 3、新建一个材质球 4、把材质球的shader修改成天空盒选项 5、在天空盒的六个方向&#xff08;前&a…
阅读更多...
Unity3D-设置天空盒

Unity3D-设置天空盒

首先打开工具栏Window下的照明&#xff0c;找到环境这里的天空盒材质就是整个项目的背景&#xff0c;可以到官网下载自己喜欢的天空盒材质 这里就是下载好的天空盒材质 点开Shader 选择Skybox 再选择Cubemap Extended 选择好后将其拖入天空盒材质 可以在检测器里调整天空盒的一…
阅读更多...
unity移动天空盒

unity移动天空盒

旋转 直接观察天空盒参数是有一个Rotation的。 我们可以通过给Camera添加Skybox组件获取到天空盒然后修改Rotation参数。 private void Update(){RotateSkybox();}//控制天空盒旋转private void RotateSkybox(){float num Camera.main.GetComponent<Skybox>().material…
阅读更多...
Unity修改默认天空盒Skybox

Unity修改默认天空盒Skybox

在Main Camera 上添加Skybox&#xff0c;并拖动目标天空盒&#xff0c;没有修改成功。 &#xff08;hierarchy 下面的 main camera 主摄像机 然后 点击 component->Rendering->skybox 给主摄像机添加一个 天空盒 这是我们就可以再 摄像机的 属性栏看到 skybox 属性 …
阅读更多...
Unity 动态天空盒

Unity 动态天空盒

为了使天空盒更真实&#xff0c;需要控制天空盒动态旋转。 网上找到的方法是&#xff1a; float num RenderSettings.skybox.GetFloat("_Rotation");RenderSettings.skybox.SetFloat("_Rotation", num 0.05f); 但在我的工程中会报错&#xff08;我的un…
阅读更多...
unity天空盒有缝隙解决方法

unity天空盒有缝隙解决方法

今天发现有些天空盒导入到unity显示会出现一个立方体的样子&#xff0c;立方体面之间会出现缝隙&#xff0c;看着很明显。 解决方法很简单&#xff0c;把天空盒的材质图片&#xff08;也就是Texture&#xff09;修改一下。 有两个地方需要修改&#xff0c;如下图&#xff1a;…
阅读更多...
Unity 天空盒的制作与应用

Unity 天空盒的制作与应用

转自https://blog.csdn.net/weixin_39923777/article/details/83030780 一.天空盒的作用&#xff1a; 1.用于渲染显示天空和周围的环境&#xff1b; 2.作为场景中的辅助光源。 二.制作天空盒&#xff1a; 1.导入“HDR 环境贴图”素材图片到unity项目中&#xff1b; 2.更改贴…
阅读更多...
unity skybox天空盒下载

unity skybox天空盒下载

几百个天空盒,分了好几份 天空盒下载 1. 太空天空盒下载 2. 白天天空盒下载 3. 夜晚天空盒下载 4. 阴天雾霾天空盒下载 5. HDRI Haven skybox-1 6. HDRI Haven skybox-2 7. 其他天空盒-1 8. 其他天空盒-2 最后是没分的天空盒暂且叫其他天空盒吧,按需下载,喜欢的话请点个赞吧…
阅读更多...
Unity3D制作天空盒

Unity3D制作天空盒

1、下载并导入hdr高动态范围图像资源到Project视图中&#xff0c;然后将图片的“Texture Shape”修改为“Cube”。 2、Project视图中新建一个Material&#xff0c;将“Shader”修改为“Skybox→Cubemap”。 3、将步骤1的图片拖入“Cubemap&#xff08;HDR&#xff09;”的框内。…
阅读更多...
Unity设置天空盒子

Unity设置天空盒子

在游戏开发中&#xff0c;我们会经常有需求是&#xff1a;要设置游戏内的一个天空的环境。 这时就可以使用Unity的天空盒子&#xff0c;来做这样的处理。 天空盒子随着镜头的转向会有不同的纹理显示&#xff0c;但是不会随着镜头的前进或后退而放大或缩小。 基于以上的需求和…
阅读更多...
unity 天空盒有接缝

unity 天空盒有接缝

当我们使用立方体天空盒时&#xff0c;有时会出现盒子的接口处有缝隙的情况 类似于这种 有一条明显的裂缝 一般来说有两种可能的情况 情况1 我们需要把所用天空盒图片的wrapMode设置为clamp模式&#xff0c;注意六个图片都要改&#xff0c;设置完后记得Apply一下 情况二 …
阅读更多...
unity天空盒

unity天空盒

1.window ->rendering ->lighting 2.创建一个材质球 &#xff0c;Shader改为Skybox ->cubemap 3.图片的Texture Shape改为cube&#xff0c;Mapping改为Latitude... 4.把配置好的图片拖拽到Cubemap上 5.把材质球拖到Skybox Material 上 完成&#xff01; PS&#xff1…
阅读更多...
Unity 天空盒

Unity 天空盒

在 Unity 中&#xff0c;天空盒是使用天空盒着色器的一种材质。 创建天空盒材质 1.从菜单栏中&#xff0c;单击 Assets > Create > Material。 2.在 Shader 下拉选单中&#xff0c;单击 Skybox&#xff0c;然后单击要使用的天空盒着色器。 有Skybox/6 Sided、Skybox/…
阅读更多...
Unity3D中如何制作天空盒

Unity3D中如何制作天空盒

一、什么是天空盒&#xff1f; 天空盒是一个全景视图&#xff0c;分为六个纹理&#xff0c;表示沿主轴&#xff08;上&#xff0c;下&#xff0c;左&#xff0c;右&#xff0c;前&#xff0c;后&#xff09;可见的六个方向。如果天空盒被正确地生成&#xff0c;那么纹理图片的…
阅读更多...
Unity3D 入门：如何制作天空效果？天空盒的使用

Unity3D 入门：如何制作天空效果？天空盒的使用

在 Unity 编辑器的主界面中我们可以很容易制作各种场景物体&#xff0c;但天空如何制作呢&#xff1f; 本文内容 了解和设置默认的天空盒在资源商店中下载天空盒总结 了解和设置默认的天空盒 在新建一个 Unity3D 项目之后&#xff0c;我们在空空如也的场景下看到的那蓝灰过渡的…
阅读更多...
推荐文章

Copyright @ 2022~2023