1.常见的布局方案有哪些？
- 流式布局
流式布局指的是按照标准文档流进行布局的布局方式，它为系统默认的布局方式，同时也是最为简单的布局方式。换句话说，在默认情况下，HTML中所有元素都是根据流动布局模型，从上到下，从左到右的方式来分布网页中的内容。
举例代码如下:
最终运行结果则是块级元素独占一行，行内元素并排显示，完全符合标准文档流的模式.
<style>
div{
width: 100px;
height: 100px;
border: 2px solid red;
}
span{
border: 1px solid blue;
}
</style>
</head>
<body>
<div>css</div>
<div>html</div>
<div>js</div>
<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>
</body>
- 浮动布局
浮动就是说盒子脱离了标准文档流（半脱离），标准文档流内的各种规则将不再适用。作用原本是为了实现字围效果，但后来发现可以让男标签并排显示，在同一行上和平共处。格式：float:left/right/none none默认为不浮动。 更为详细的内容会在下面详细解释。
举例代码如下：
代码跑起来会出现字围效果，即文字（足够多时效果更明显）将图片包围了起来
<style>
img{
width: 100px;
height: 100px;
border: 2px solid green;
float:left;
}
</style>
</head>
<body>
<div>
<!--图片可以为任意-->
<img src="./imgs/icon.png" alt="">
作用原本是为了实现字围效果，但后来发现可以让男标签并排显示，在同一行上和平共处。
作用原本是为了实现字围效果，但后来发现可以让男标签并排显示，在同一行上和平共处。
作用原本是为了实现字围效果，但后来发现可以让男标签并排显示，在同一行上和平共处。
作用原本是为了实现字围效果，但后来发现可以让男标签并排显示，在同一行上和平共处。
作用原本是为了实现字围效果，但后来发现可以让男标签并排显示，在同一行上和平共处。
</div>
</body>
使得块级元素并排显示
<style>
div{
width: 100px;
height: 100px;
background-color:#358990;
border: 2px solid yellow;
/* 会使得div并排显示 */
float: left;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
<div>div</div>
</body>
- 层布局
层布局简单来说可以称为定位，它是完全脱离了标准文档流的一种布局方案。它的好处：能够实现更为丰富的布局方式，为用户提供更好的体验。使用position这个属性来实现。
在CSS中，对于层布局，有如下三种实现方法（定位方式）：
- 相对定位：relative
参考点：盒子本身它应该出现的位置；
应用：在进行局部的细节调整时，或者作为绝对定位的参考点时。 - 绝对定位：absolute
参考点：根据设置的参考点（position：relative）进行定位 注意点：在寻找参考点时是一直向上寻找，找到的话就以这个参考点为主，否则就一直向上寻找，直到body，如果body没有设置参考点，那么就以body为参考点。
z-index:绝对定位由于它完全脱离了标准文档流，它可能会发生覆盖；在它发生覆盖时，可通过z-index改变先后顺序1，z-index的值越大，就越靠前。
另外有个小知识点就是无论盒子是否完全脱离文档，只要是脱离啦，那么就变成了块级，就可以设置宽高啦！不论是哪种定位，都需要设置偏移量（top,right,bottom,left）。 - 固定定位:fixed
参考点：网页上的页面视窗
注意细节：在使用百分比时，它不是相对于body的值，而是针对当前窗口的值。
- flex布局
flex布局要比float更好用，要是你熟练掌握flex布局，不会float也OK的！ flex布局的四大概念：
（1）容器：如果一个盒子设置了display：flex，那么这个盒子（必须是div标签）就变成一个容器；
（2）项目：容器的直接子元素才可称之为项目，其它的都不属于项目；
（3）主轴：在容器（这时已经display过啦）中，项目默认按主轴方向排列，默认是从左向右排列的；
（4）交叉轴：与主轴垂直的轴称为交叉轴。
容器的相关属性：
（1）flex-direction:改变主轴方向 值：row(默认主轴方向) column(垂直的主轴方向) row-reverse(存在反转的含义) column-reverse(同上)
（4）justify-content:处理富余空间 值：flex-start flex-end center space-between space-around
（1）order:用来改变项目顺序和z-index有点相像，只不过该值是越大越靠后，z-index是越大越靠前 值：直接用数字来表示大小
（4） flex-basis：项目在主轴上占据的大小 值：直接用数字（px）来表示大小，可以设置为百分比(这是基于容器来说的)。
（6）align-self：单独设置某个项目的对齐方式,单独一个项目在交叉轴的对齐方式 值：flex-start flex-end center
2.浮动布局的详细介绍
（1）浮动有三大特点
- 包裹性：如果一个块级元素，在没有设置width的情况下（前提条件），一旦使用float，那么它的宽度就会发生变化，尽量最小，包裹元素里的内容，能够完全包裹其中内容。
- 破坏性：在一个块级元素中，如果它的子元素都浮动了起来，并且没有清除浮动，那么块级元素将会塌陷，这就是浮动的破坏性。
- 块级框：如果一个行内元素，设置浮动以后就变成一个块级框，块级框有一个特点，就是可以设置盒子模型的六大属性；简单来说，当一个元素浮动时，它会悄悄的做一个变性手术。如果一个女盒子浮动了，那么就可以设置宽高了相当于把它变成男标签（挺简单的，不再写代码啦）。
（2）浮动的其它特点
0，浮动的初衷目的是为了实现字围效果，后来才发现，浮动可以让多个男标签并排显示。
1，在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就向上排，它只会对浮动元素后面的元素起作用。
2，浮动并没有完全脱离标准文档流，仅仅是半脱离，具有脱标性，如果后面元素内部有文字，这些文字会环绕在浮动元素的周围，产生了字围效果。
3，如果多个元素浮动了，那么它们会并排显示，如果都是向同一方向的浮动，它们会紧紧贴靠在一起。
4，如果一个元素浮动了，先向上移动，直到贴靠到父元素顶部，接着满足左浮动或者右浮动的要求，向左边界或右边界浮动，直到移动到父元素的边界处。
5，如果一个元素没有设置高度，它的高度由里面的内容撑起来，如果父元素内部元素都浮动了，那么会造成父元素的塌陷问题；而如果父元素也浮动了，则不会出现高度的塌陷。
6，一个元素浮动了，那么它也会受到父元素的控制。当父元素宽度变小时，装不下所有子元素时，后面的子元素具有贴靠性。当父元素小到极致时，里面浮动的子元素宽度是不会改变的，也就是说边框走，里面内容宽度不变。
7，就是说如果有一个元素为左浮动，一个元素为右浮动，那么你需要把右浮动的元素写在左左浮动的前面。
8，如果元素浮动，那么会造成的影响有：造成父元素高度塌陷；对后面兄弟元素造成影响。
（3）元素浮动造成的影响解决方法
针对的是父元素塌陷的解决方案：
1，加高法：就是直接给块级元素加一个高度；大部分情况下是不用的，因为父元素的高度都是由子元素的内容撑起来的。
2，overflow：hidden：使用了overflow：hidden，父元素会随着子元素的高度变化而变化。overflow：hidden本来是用来处理溢出的，在使用过程中，需要注意子元素如果想要超出父元素的高度，此时overflow：hidden也就不适合啦！
3，clear:both（内墙法）：在所有子元素后面加一个空的div，在这个div上面加clear:both；它的优点在于clear:both专业清除浮动的，而缺点是多写一个代码
针对后面兄弟元素影响的解决方案：
1，直接在受影响元素上加clear:both。
工程中常用的清除浮动的方案：
1，利用伪元素 after 也就是说直接写一个清除浮动的类（clear）：
举例.clear:after{content=""; display:block; clear:both; height:0; overflow:hidden;}