36、CSS⾼频前端⾯试题之定位与浮动
⽬录
1、为什么需要清除浮动？清除浮动的⽅式
（1）浮动的定义： ⾮IE浏览器下，容器不设⾼度且⼦元素浮动时，容器⾼度不能被内容撑开。 此时，内容会溢出到容器外⾯⽽影响布局。这种现象被称为浮动（溢出）。
（2）浮动原理：
当⼀个元素浮动之后，就会移出正常的⽂档流（内联元素与p标签会识别float为正常⽂档流。），向左或向右平移，直到碰到了所处容器的边缘，或者碰到另外⼀个浮动的元素。
⼀旦让div浮动起来，其⽗元素⽴刻会像inline⼀样产⽣包裹性（包裹性就是⽗元素的宽度会收缩到和内部元素宽度⼀样，float属性会改变元素display属性最终的值。），其容器的宽度会随内容⾃适应（这也是通常float元素需要⼿动指定width的原因）
（3）浮动特点：
元素在浮动之后有三个重要的特点：
1. 脱离⽂档流，不占据空间。
2. 向左/向右浮动直到遇到⽗元素或者别的浮动元素。
3. 浮动会导致⽗元素⾼度坍塌。
（4）破坏性（⽗元素出现⾼度塌陷）：
⽗容器的⾼度是内部容器撑开的，当⼦元素元素浮动后，脱离了正常⽂档流，导致⽗容器的⾼度塌陷，⾼度变为0px。
（5）清除浮动（即清除浮动引起的⽗元素塌陷、元素重叠等）的5种⽅法：
未添加浮动前：
添加浮动后（⽗元素⾼度塌陷）：
1）. overflow: hidden;
原理：BFC（Block Formatting Context）全称是块级格式化上下⽂，⽤于对块级元素排版，默认情况下只有根元素（body）⼀个块级上下⽂。
但是如果⼀个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素⽣产⼀个独⽴的块级上下⽂，使这个块级元素内部的排版完全独⽴。
作⽤：独⽴的块级上下⽂可以包裹浮动流，全部浮动⼦元素也不会引起容器⾼度塌陷（包含块会把浮动
元素的⾼度也计算在内，所以就不⽤清除浮动来撑起包含块的⾼度）。
原理：使⽤overflow:hidden时，浏览器会⾃动检查浮动区域的⾼度。
优点：简单，代码少，浏览器⽀持好。
缺点：必须定义width或zoom:1（含有浮动⼦元素的元素），不能和position配合使⽤，因为超出的尺⼨会被隐藏。
建议：只推荐没有使⽤position或对overflow:hidden理解的朋友使⽤。
2）. 结尾处加空div标签，并为其添加属性clear:both
表⽰在其左右两侧均不允许浮动元素
原理：添加⼀个空div，利⽤css提供的clear:both清除浮动，让⽗级div能⾃动获取到⾼度。
优点：简单，代码少，浏览器⽀持好，不容易出现怪问题。
缺点：不少初学者不理解原理；如果页⾯浮动布局多，就要增加很多空div，让⼈感觉很不爽。
建议：此⽅法是以前主要使⽤的⼀种清除浮动⽅法。
3）. 直接为⽗级div定义height
原理：⽗级div⼿动定义height，就解决了⽗级div⽆法⾃动获取到⾼度的问题。
优点：简单，代码少，容易掌握。
缺点：只适合⾼度固定的布局，要给出精确的⾼度，如果⾼度和⽗级div不⼀样时，会产⽣问题。
建议：不推荐使⽤，只建议⾼度固定的布局时使⽤。
4）. ⽗级div定义overflow:auto
原理：如果宽度是由内容⾃适应撑开的，则overflow: auto;
问题：撑开容器⾄正好显⽰所有内容时，如果有滚动条，则滚动条会覆盖在内容上⽅，导致内容宽度再次被缩⼩，然后出现省略号。
由此推测渲染顺序：⾃适应宽度 → 根据⾼度显⽰滚动条 → 重新计算内部元素宽度
原理：同1，使⽤overflow:auto时，浏览器会⾃动检查浮动区域的⾼度。
优点：简单，代码少，浏览器⽀持好。
缺点：内部宽⾼超过⽗级div时，会出现滚动条。
建议：不推荐使⽤，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使⽤吧。
5）.⽗级div定义伪类:after和zoom
.container: after  表⽰在container的内容之后插⼊元素，插⼊的元素仍在container盒⼦模型之中
优点：浏览器⽀持好，不容易出现怪问题（⽬前：⼤型⽹站都有使⽤，如：腾迅，⽹易，新浪等等）。
缺点：代码多，不少初学者不理解原理，要两句代码结合使⽤，才能让主流浏览器都⽀持。
建议：推荐使⽤，建议定义公共类，以减少CSS代码。
注：zoom：1 是为了防⽌低版本的IE浏览器不⽀持after选择器或者某些属性，在最后加上zoom:1来清除浮动
2、使⽤ clear 属性清除浮动的原理？
clear 属性指的：“元素盒⼦的边不能和前⾯的浮动元素相邻”，对元素设置clear属性是为了避免浮动元素对该元素的影响，⽽不是清除掉浮动。注意这⾥“前⾯的”3个字，也就是clear属性对“后⾯的”浮动元素是不闻不问的。考虑到float属性要么是left，要么是right，不可能同时存在，直接使⽤clear:both吧。
3. 对BFC的理解，如何创建BFC（块格式化上下⽂）
1）BFC的概念：
Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个Box就是我们所说的盒模型。
Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。
块格式化上下⽂（Block Formatting Context，BFC）是Web页⾯的可视化CSS渲染的⼀部分，是布局过程中⽣成块级盒⼦的区域，也是浮动元素与其他元素的交互限定区域。
通俗来讲：BFC是⼀个独⽴的布局环境，可以理解为⼀个容器，在这个容器中按照⼀定规则进⾏物品摆放，并且不会影响其它环境中的物品。如果⼀个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
2）创建BFC的条件：
根元素：body；
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex等；
overflow 值为：hidden、auto、scroll；
3）BFC的特点：
垂直⽅向上，⾃上⽽下排列，和⽂档流的排列⽅式⼀致。
在BFC中上下相邻的两个容器的margin会重叠
计算BFC的⾼度时，需要计算浮动元素的⾼度
BFC区域不会与浮动的容器发⽣重叠
BFC是独⽴的容器，容器内部元素不会影响外部元素
每个元素的左margin值和容器的左border相接触
4）BFC的作⽤：
解决margin的重叠问题：由于BFC是⼀个独⽴的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
解决⾼度塌陷的问题：在对⼦元素设置浮动后，⽗元素会发⽣⾼度塌陷，也就是⽗元素的⾼度变为0。解决这个问题，只需要把⽗元素变成⼀个BFC。常⽤的办法是给⽗元素设置overflow:hidden。
创建⾃适应两栏布局：可以⽤来创建⾃适应两栏布局：左边的宽度固定，右边的宽度⾃适应。
.left{
width: 100px;
height: 200px;
background: red;
float: left;
}
.right{
height: 300px;
background: blue;
overflow: hidden;
}
<div class="left"></div>
<div class="right"></div>
复制代码
左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发⽣重叠，所以两侧就不会发⽣重叠，实现了⾃适应两栏布局。
4. 什么是margin重叠问题（外边距折叠问题）？如何解决？
（1）问题描述： 两个块级元素的上外边距和下外边距可能会合并（折叠）为⼀个外边距，其⼤⼩会取其中外边距值⼤的那个，这种⾏为就是外边距折叠。重叠只会出现在垂直⽅向。需要注意的是，浮动的元素和绝对定位这种脱离⽂档流的元素的外边距不会折叠。
（2）计算原则： 折叠合并后外边距的计算原则如下：
如果两者都是正数，那么就取最⼤者
如果是⼀正⼀负，就会正值减去负值的绝对值
两个都是负值时，⽤0减去两个中绝对值⼤的那个
（3）解决办法： 对于折叠的情况，主要有两种：兄弟之间重叠和⽗⼦之间重叠
1）兄弟之间重叠
css固定定位
底部元素变为⾏内盒⼦：display: inline-block
底部元素设置浮动：float
底部元素的position的值为absolute/fixed
2）⽗⼦之间重叠
⽗元素加⼊：overflow: hidden
⽗元素添加透明边框：border:1px solid transparent
⼦元素变为⾏内盒⼦：display: inline-block
⼦元素加⼊浮动属性或定位
5. 元素的层叠顺序
层叠顺序，英⽂称作 stacking order，表⽰元素发⽣层叠时有着特定的垂直显⽰顺序。下⾯是盒模型的层叠规则：
对于上图，由上到下分别是： （1）背景和边框：建⽴当前层叠上下⽂元素的背景和边框。 （2）负的z-index：当前层叠上下⽂中，z-index属性值为负的元素。 （3）块级盒：⽂档流内⾮⾏内级⾮定位后代元素。 （4）浮动盒：⾮定位浮动元素。 （5）⾏内盒：⽂档流内 ⾏内级⾮定位后代元素。 （6）z-index:0：层叠级数为0的定位元素。 （7）正z-index：z-index属性值为正的定位元素（在最上⾯）。
注意: 当定位元素z-index:auto，⽣成盒在当前层叠上下⽂中的层级为 0，不会建⽴新的层叠上下⽂，除⾮是根元素。
6. position的属性有哪些，区别是什么
position有以下属性值：
属性值概述

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。