网页三大基础布局

网页三大布局方式

一、流式布局

想要知道什么是流式布局，就要知道什么是标准的文档流即，

网页元素会默认自动从上往下的，从左往右 流式排列方式。

流式布局按标准文档流进行布局的，也是默认的布局方式，这种布局方案，是最简单的一种布局方案。

功能太弱。
如果只使用流式布局，并不能完成复杂页面的开发

二、浮动布局

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写在哪个兄弟上面。