36、CSS高频前端面试题之定位与浮动

最新推荐文章于 2024-03-21 13:13:26 发布

C.&H.

最新推荐文章于 2024-03-21 13:13:26 发布

阅读量650

点赞数 2

分类专栏：前端面试题目

本文链接：https://blog.csdn.net/sunnnnh/article/details/117699818

版权

前端面试题目专栏收录该内容

136 篇文章 39 订阅

订阅专栏

1、为什么需要清除浮动？清除浮动的方式

2、使用 clear 属性清除浮动的原理？

3. 对BFC的理解，如何创建BFC（块格式化上下文）

4. 什么是margin重叠问题（外边距折叠问题）？如何解决？

5. 元素的层叠顺序

6. position的属性有哪些，区别是什么

7. display、float、position的关系

8. absolute与fixed共同点与不同点

9. 对 sticky 定位的理解

1、为什么需要清除浮动？清除浮动的方式

（1）浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

（2）浮动原理：

当一个元素浮动之后，就会移出正常的文档流（内联元素与p标签会识别float为正常文档流。），向左或向右平移，直到碰到了所处容器的边缘，或者碰到另外一个浮动的元素。

一旦让div浮动起来，其父元素立刻会像inline一样产生包裹性（包裹性就是父元素的宽度会收缩到和内部元素宽度一样，float属性会改变元素display属性最终的值。），其容器的宽度会随内容自适应（这也是通常float元素需要手动指定width的原因）

（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）兄弟之间重叠

底部元素变为行内盒子：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有以下属性值：

属性值	概述
absolute	生成绝对定位的元素，相对于static定位以外的一个父元素进行定位。元素的位置通过left、top、right、bottom属性进行规定。
relative	生成相对定位的元素，相对于其原来的位置进行定位。元素的位置通过left、top、right、bottom属性进行规定。
fixed	生成绝对定位的元素，指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如回到顶部的按钮⼀般都是⽤此定位⽅式。
static	默认值，没有定位，元素出现在正常的文档流中，会忽略 top, bottom, left, right 或者 z-index 声明，块级元素从上往下纵向排布，⾏级元素从左向右排列。
inherit	规定从父元素继承position属性的值

前面三者的定位方式如下：

relative： 元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。

fixed： 元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。

absolute： 元素的定位相对于前两者要复杂许多。如果为 absolute 设置了 top、left，浏览器会根据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。如下两个图所示：

7. display、float、position的关系

（1）首先判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。

（2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被设置为table或者block，具体转换需要看初始转换值。

（3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display的值则按上面的规则转换（table或者block）。注意，如果position的值为relative并且float属性的值存在，则relative相对于浮动后的最终位置定位。

（4）如果float的值为none，则判断元素是否为根元素。如果是根元素，则display属性按照上面的规则转换（table或者block），如果不是，则保持指定的display属性值不变。

总的来说，可以把它看作是一个类似优先级的机制：

"position:absolute"和"position:fixed"优先级最高，有它存在的时候，浮动不起作用，'display'的值也需要调整；
其次，元素的'float'特性的值不是"none"的时候或者它是根元素的时候，调整'display'的值；
最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display'特性值同设置值。

8. absolute与fixed共同点与不同点

共同点：

改变行内元素的呈现方式，将display置为inline-block
使元素脱离普通文档流，不再占据文档物理空间
覆盖非定位文档元素

不同点：

absolute与fixed的根元素不同，abuselute的根元素可以设置，fixed根元素是浏览器。
在有滚动条的页面中，absolute会跟着父元素进行移动，fixed固定在页面的具体位置。

9. 对 sticky 定位的理解

（1）sticky 定位：

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
当页面滚动未超出目标区域时，它的行为就像 position:relative;
当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

（2）语法：

#one { position: sticky; top: 10px; }

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素（#one）为相对定位。之后，元素将固定定位在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

（3）例如：将阈值设置为 top:50px，具有滚动机制的祖先元素是 item的直接父元素box。当box的子元素item到达阈值50时，就定位到box内距离50的位置。

.item{
    position:sticky;
    top:50px;
    ....
}

.box{
    width:400px;
    height:300px;
    overflow:auto;
    ....
}


<div class="box">
        <div class="top"></div>
        <div class="item">top 50px</div>
        <div class="space"></div>
        <div class="space"></div>
        <div class="space"></div>
        <div class="space"></div>
        <div class="space"></div>
        <div class="space"></div>
</div>

C.&H.

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
36、CSS高频前端面试题之定位与浮动

1、（1）浮动原理：当一个元素浮动之后，就会移出正常的文档流（内联元素与p标签会识别float为正常文档流。），向左或向右平移，直到碰到了所处容器的边缘，或者碰到另外一个浮动的元素。一旦让div浮动起来，其父元素立刻会像inline一样产生包裹性（包裹性就是父元素的宽度会收缩到和内部元素宽度一样，float属性会改变元素display属性最终的值。），其容器的宽度会随内容自适应（这也是通常float元素需要手动指定width的原因）（2）浮动特点：元素在浮动之后有三个重要的特点：脱离
复制链接

扫一扫