本文详细介绍了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: 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）font-size：0 换行符的那个间隙也是有font-size来计算出来给对应的父元素设置font-size为0，这样就没有间隙了。但是需要给对应的行内块重新设置font-size。
3.层布局
在开发网页时，有时候，仅仅使用上面的两种布局，并不能完成我们的需求。此时，就需要使用层布局，说白了，就是定位。通过定位使用的布局，叫层布局。
定位的分类：
（1） 相对定位 position:relative
依据原本的位置进行定位，参考点：本身的位置，
问： 只要定位肯定需要设置偏移量。如何设置偏移量？
答： top, left, bottom, right 绝大部分情况下，只会用其中两个
应用场景： 在原本的位置基本上，进行偏移时，可以使用相对定位。
- 对一个盒子的位置进行微调。
- position:relative 这一行代码还有一个作用，设置绝对定位的参数点。
注意细节：
- 相对定位的元素脱离标准文档流，但是它原本的位置还是被自己占用着，别人无法占用。
- 不管一个盒子，之前是什么性别，定位完后，还是什么性别。
- 当进行了相对定位，基本上都要通过top, left, bottom, right来设置偏移量。
- 如果设置了margin也会影响位置。
（2） 绝对定位 position:absolute
绝对定位：格式：position:absolute。
参考点，需要我们自己去设置，写一行代码来设置：position:relative
如果不设置参考点，就一级一级向上找，直到body，最终就以body作为参考点。只要是定位，都要设置偏移量。top、left, right, bottom。 一般我们会给绝对定位的元素的父元素设置成参考点：子绝父相（参考点）。
应用场景： 在原本的位置基本上，进行偏移时，可以使用相对定位。
- 让块级元素水平垂直居中。
- 在写一些效果时，绝对定位使用的还是比较多，如：轮播图…
- 在写动画时，会也使用到绝对定位。
注意细节：
- 绝对定位的元素是完全脱离标准文档流。
- 一个元素绝对定位后，显示在什么地方，主要看你把参考点设置在了什么地方，如果没有设置，最终就以body作为参考点。
- 一个元素绝对定位了，就变性了，女盒子就变成男盒子（行内元素就变成块级元素）。
- 绝对定位也需要设置偏移量，有两个方向: left right 另一个方向是top bottom，设置偏移量，一般是两个方向选其一。
- 一般情况下，我们是给父元素设置参考点，口决：子绝父相。
- 定位完，还可以通过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。多用于网页的头部区域固定。
注意细节：
- 完全脱离标准文档流。
- 不管是什么性别的元素，固定定位了，都会就成男的。
- 固定定位的参考点是浏览器的窗口，不会随着内容的滚动而滚动。
- 对于固定定位，有些低版本浏览器支持并不好，使用的时候，需要考虑兼容性问题。
（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>
如下：
解决方法
（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>
四、浮动元素的特性
- 贴靠性。一堆浮动的元素，会彼此的贴靠。
- 如果父元素宽度变小了，儿子还会具有贴靠性，直到所有的浮动元素贴到父元素的边框。
- 如果一个元素浮动了，它也不可能浮动到父元素外面。
- 一个元素浮动了，它会自动地“变性”，变成人妖了。女盒子变人妖盒子，男盒子也变。
- 浮动元素它是半脱离标准文档流，证明：字围效果。
- 在一个父元素中，所有的子元素都浮动了，会造成父元素的高度塌陷。此时，如果父元素也浮动了，高度就不塌陷。（因为浮动的元素会形成BFC）。
- 如果一个元素浮动了，就不能使用margin:0 auto; 让一个盒子水平居中了。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
