文章目录
- 网页三大布局方式
- 一、流式布局
- 二、浮动布局
- 1.字围效果
- 2.圣杯布局
- 三、层布局
- 1.相对定位
- 2.绝对定位
- 3.静态定位
- 三、浮动元素会造成影响：
- 1）对父元素的影响
- 2）对兄弟元素的影响
网页三大布局方式
一、流式布局
想要知道什么是流式布局，就要知道什么是标准的文档流即，
网页元素会默认自动从上往下的，从左往右 流式排列方式。
流式布局按标准文档流进行布局的，也是默认的布局方式，这种布局方案，是最简单的一种布局方案。
功能太弱。
如果只使用流式布局，并不能完成复杂页面的开发
二、浮动布局
1.字围效果
为了让块级元素可以并排显示，就可以使用浮动布局
最初浮动效果的发明知识为了让文字能够环绕图片------>字围效果
-
如果一个元素浮动，就会班脱离文档流，文档流里的一些标准二也就不在适用
-
如图将图片设为浮动，其后面的文字应该会往上窜，图片会覆盖文字，但实际是文字环绕图片的字围效果
这种情况就叫做字围效果，最初浮动就是为了字围而产生
但人们发现，浮动也可以让块级元素并排显示，慢慢的我们都是用浮动让块级元素并排显示
标准文档流规定：
1）男盒子需要独占一行，女盒子和人妖盒子需要并排显示，满一行也会自动换行。
2）默认是从上到下，从左到右进行布局，这就形成一个标准的文档流。
2.圣杯布局
浮动布局典型的一种布局方式就是圣杯布局
使用浮动的目的就是将块元素并排显示
三、层布局
通过定位使用的布局，叫做层布局
1.相对定位
依据原本的位置进行定位，参考点：本身的位置，
然后通过top, left, bottom, right设置值偏移量
2.绝对定位
绝对定位：格式：position:absolute。
参考点，需要我们自己去设置，写一行代码来设置：position:relative（一般写给父元素）
如果没写就会一层一层的往上找，知道body为止
也是通过top、left, right, bottom来设置偏移量
注意设置绝对定位的元素是完全脱离标准的文档流的，多个元素进行觉得定位会发生元素重叠的现象，一般是后面的覆盖前面的
3.静态定位
就是不定位，默认的
三、浮动元素会造成影响：
1）是对父元素造成影响
2）对后面的兄弟元素造成影响
1）对父元素的影响
当父元素中的所有元素都浮动了，并且父元素没有设置高度，父元素的高度就会变成0，也叫父元素高度塌陷。
我们需要解决这种浮动产生的问题就叫做清楚浮动
①给父元素设置hight
②overflow:hidden
③伪墙法
<style>
/* 在father后面创建一个伪元素，并可设置为不可见*/
.father::after{
content: "";
display: block;
clear: both;
/* 是否可见 hidden表示不可见*/
visibility: hidden;
}
</style>
2）对兄弟元素的影响
在一个父元素中，如果box1，box2，box3,都浮动了，没有浮动的box4就会钻上去。
clear本意就是清除的意思。
clear:left; 清除左浮动造成的影响
clear:right; 清除右浮动造成的影响
clear:both; 清除左右浮动造成的影响
哪个兄弟受影响了，就需要把这个clear:both写在哪个兄弟上面。
