当前位置：网站首页 > 编程网 > 正文

前端面试-清浮动还能问的这么刁钻么?

yuyutoo 2025-04-06 00:09 18 浏览 0 评论

前端面试题万万千，每每感觉准备的差不多的时候总会出现奇怪的题型，大家还得提升自己，互相学习呀。

在网页布局中，浮动元素脱离了文档流，可能会导致父元素高度塌陷等问题，所以出现了清理浮动的需求。

使用clear属性

在元素末尾添加一个空的div，设置属性 clear: both;

这个属性的作用就是清除元素左右两边的浮动。

使用overflow属性

父元素添加 overflow：hidden；

伪元素清除法（推荐方案）

父元素添加上面的class，这个方法不同添加额外的空元素。

父元素浮动法

display: flow-root（最新方案）

这个方法比较新颖，答出来会让面试官感觉你是持续跟进技术一线的。

看到这里大家可能会觉得这不是众所周知的东西么，冷不防的居然会问：

overflow: hidden 为什么能实现清理浮动的效果？

什么是块级格式化上下文：BFC 是 Web 页面中盒模型布局的 CSS 渲染模式，它是一个独立的渲染区域，规定了内部元素如何布局，以及与外部元素的相互关系和作用。
BFC 的特点内部的盒子会在垂直方向上一个接一个地排列。BFC 区域不会与浮动元素重叠。BFC 是一个独立的容器，内部元素的布局不会影响到外面的元素，反之亦然。计算 BFC 的高度时，会包括浮动元素的高度。
清除浮动的原理：当一个元素设置了overflow:hidden后，它就创建了一个 BFC。根据 BFC 的特点，其内部的浮动元素会参与 BFC 的高度计算，从而使包含浮动元素的父元素能够正确地计算出高度，避免了因浮动导致的父元素高度塌陷问题，也就达到了清除浮动的效果。

以前不太理解的BFC, 可算是明白了，大家共勉。

clearboth

上一篇：搜不到的万般“温柔仙句”:我爱你有迹可循
下一篇：Window of peace should not be squandered

相关推荐

对volatile，synchronized,AQS的加锁解锁原理的一些理解: 一、为什么要加锁，要实现同步多线程编程中，有可能会出现多个线程同时访问同一个共享、可变资源的情况，这个资源我们称之其为临界资源；这种资源可能是：对象、变量、文件等。...

注意，不能错过的CAS+volatile实现同步代码块: 前言：最近看到有人说可以使用CAS+volatile实现同步代码块。心想，确实是可以实现的呀！因为AbstractQueuedSynchronizer（简称AQS）内部就是通过CAS+...

面试并发volatile关键字时，我们应该具备哪些谈资?: 提前发现更多精彩内容，请访问https://dayarch.top/提前发现更多精彩内容，请访问https://dayarch.top/提前发现更多精彩内容，请访问https://dayarch...

无锁同步-JAVA之Volatile、Atomic和CAS: 1、概要本文是无锁同步系列文章的第二篇，主要探讨JAVA中的原子操作，以及如何进行无锁同步。关于JAVA中的原子操作，我们很容易想到的是Volatile变量、java.util.concurrent....

C/C++面试题(二):std::atomic与volatile: volatile是C/C++中的一个关键字，用于告知编译器某个变量的值可能会在程序的控制之外被意外修改（例如被硬件、中断服务程序、多线程环境或其他外部代理）。为了防止编译器对代码进行某些可能破坏...

VOCs(Volatile Organic Compounds)挥发性有机化合物及测试方法: 经常看到一些三防漆、涂料、油漆类产品的介绍中提到VOC、VOCs等概念，那么什么是VOC、VOCs和TVOC，VOCs主要包括哪些物质？VOCs的来源有哪些？VOCs的危害及国家标准是什么?一、V...

对volatile 及happen—before的理解: happen—before规则介绍Java...

这一篇我们来了解Synchronized、Volatile、Final关键字: 题外话：蓝银王觉醒了！！--来自于一个斗罗大陆动漫爱好者（鹅，打钱！）湿兄这两天回家了，办了点大事，回来的时候我弟弟还舍不得我，哭着不愿意让我回京（我弟还是小学），我也心里很不舍，但是还是要回京奋斗...

关于 Java 关键字 volatile 的总结: 1什么是volatilevolatile是Java的一个关键字，它提供了一种轻量级的同步机制。相比于重量级锁synchronized，volatile更为轻量级，因为它不会引起线程上下文...

大白话聊聊Java并发面试问题之volatile到底是什么?: 用最简单的大白话，加上多张图给大家说一下，volatile到底是什么？...

为什么要有volatile关键字（volatile 关键字为什么不能保证原子性）: 在嵌入式编程和多线程编程中，我们常会见到volatile关键字声明的变量。下面说一下volatile关键字的作用：1.保持变量内存可见简而言之就是用volatile声明的变量会告诉编译器和处理器，这个...

Java的volatile到底怎么理解?（java volatitle）: 我们都知道，在Java中有很多的关键字，比如synchronize比如volatile，这些都是一些比较关键的，还有final，今天我们就来聊一下这个volatile因为这个vo...

Java多线程编程中的volatile关键字:解密神秘的共享内存: Java多线程编程中的volatile关键字：解密神秘的共享内存在Java多线程编程的世界里，volatile关键字就像一位低调却至关重要的守护者。它默默无闻地站岗放哨，确保多个线程之间能够正确地共享...

你了解volatile关键字的作用吗?（关键字volatile有什么含意?并举出三个不同的例子?）: 【死记硬背】volatile关键字主要用于保持内存的变量可见性和禁止重排序。变量可见性：当一个线程改变了变量的值，那么新的值对于其他线程也是可以立即获取到的。禁止重排序：...

谈谈你对volatile 关键字作用和原理的理解: 一位6年工作经验的小伙伴，在某里二面的时候被问到“volatile”关键字。然后，就没有然后了…同样，还有一位4年的小伙伴，去某团面试也被问到“volatile关键字“。然后，也没有然后了…...

取消回复欢迎你发表评论:

一周热门

最近发表

首页
收录
顶部