前端面试篇之常考的CSS（二）

Nw
206 阅读5分钟

前端面试篇之常考的CSS（一） 接上一篇，我们来继续聊一聊css中常考的问题

如何清除浮动？

这道题呢，面试官要让我们讲清除浮动，但是我们不能只讲清除浮动。我们应该从介绍浮动开始引入主题。

浮动的定义：W3C CSS2规范中对浮动的定义如下：

浮动（float）属性指定了一个盒子可以浮动的边缘。一个浮动的盒子会尽可能地靠近其父元素的左边或右边边缘，同时它后面的任何元素都可以伸展到包围它的框旁边。一个浮动的盒子不会影响它前面的兄弟元素。

浮动的工作原理：

  • 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
  • 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

浮动带来的问题：

  • 如果父容器没有设置高度，子容器为浮动元素则父容器的高度将无法被撑开，影响与父容器同级的元素
  • 浮动元素会影响同级的非浮动元素的布局

举个例子：

<--- html --->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<p></p>

<--- css --->
ul {
    list-style: none;
}

li {
    float: left;
    width: 200px;
    height: 50px;
    background-color: cyan;
}

p {
    height: 100px;
    width: 200px;
    background-color: red;
}

可以看看效果

image.png

p标签直接和li重合了，证明li的父容器ul没有了高度，这种效果就是高度塌陷。所以我们得清除浮动

清除浮动并不是清除浮动的效果，而是清除浮动带来的问题

clear属性

在浮动元素的最后面添加一个空容器，在它身上添加clear : both，如：

<--- html --->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <div class="clear"></div>
</ul>
<p></p>

<--- css --->
ul {
    list-style: none;
}

li {
    float: left;
    width: 200px;
    height: 50px;
    background-color: cyan;
}

.clear{
    clear:left
}
p {
    height: 100px;
    width: 200px;
    background-color: red;
}

看看效果：

image.png

ul的高度就有了，这里clear后面可以写left、right、both。这里的区别是清除左边浮动、右边浮动和不管左右都清除，这里设置的是左边浮动、如果用right清除右边浮动则没有效果。所以为了省事一般都是直接用both。这里得提醒一下，如果将div标签换成span标签得而外将他用display:block设置成块级。

伪元素after

在父容器的伪元素 after 上做清除浮动，因为ul的伪元素after的位置是在闭标签结束之前，与上面方法div的位置一样。

image.png

所以我们直接将他设置为块级元素加上clear：both来清除浮动。这种方法不需要在HTML中添加额外的标签，仅通过CSS就可以实现清除浮动的效果。会显得代码比较优雅。

BFC

这里我们直接说把父容器设置成BFC容器，在父容器添加overflow:hidden属性。这里我们先简单一说下，然后面试官就会顺着套往下钻就会让我们聊一聊BFC容器了。

BFC，全称为 Block Formatting Context（块级格式化上下文），是CSS中一个重要的概念，用于描述在页面上如何布局块级元素。当一个元素创建了一个BFC，它会对其内部子元素的布局产生影响，并且会影响到相邻元素的布局方式。

BFC 的概念与规则

BFC 是一个独立的渲染区域，它具有以下特性：

  1. 内部的子元素依然按照正常的文档流进行排列：BFC 内部的子元素会像普通的块级元素一样，按照从上到下的顺序排列。
  2. BFC 计算高度时会包含浮动的子元素：通常情况下，如果一个元素内部有浮动的子元素，它们不会影响父元素的高度，但如果该元素创建了 BFC，浮动的子元素的高度会被包含在内，从而解决“高度塌陷”问题。
  3. BFC 中子元素的 margin-top 不会和父元素的 margin-top 重叠：在普通文档流中，垂直相邻的块级元素可能会发生外边距重叠的现象。但在 BFC 中，子元素的外边距不会和父元素发生重叠，从而解决这个问题。

BFC 的触发条件

要创建一个 BFC，可以通过以下方式：

  1. 设置 overflow 属性为 hidden、auto、overlay 或 scroll：这会使得该元素生成 BFC，从而包含内部的浮动元素并避免外边距重叠。

  2. 设置 float 属性为 left 或 right：浮动元素会自动创建 BFC，使其浮动时不会影响周围的元素。

  3. 使用 display 属性的某些值：

    • inline-block：元素会以内联块的方式显示，并创建 BFC。
    • flex 或 inline-flex：Flex 容器会自动创建 BFC，用于实现更复杂的布局。
    • inline-table 或 table-xxx：这些值也会创建 BFC，使得表格样式的元素可以正常渲染。

BFC 的应用场景

BFC 的使用在实际开发中有非常广泛的应用，主要包括：

  1. 清除浮动：当父元素没有包含浮动子元素的高度时，可以通过创建 BFC 来清除浮动，从而确保父元素能够正确包含子元素的高度。
  2. 防止 margin 重叠：在某些情况下，块级元素之间的 margin 会发生重叠，通过创建 BFC，可以有效避免这种重叠现象，从而更好地控制布局
avatar
文章
阅读
粉丝