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

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

yuyutoo 2025-04-06 00:09 17 浏览 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

相关推荐

深度解读Spring框架的核心原理: 深度解读Spring框架的核心原理在Java开发的世界里，提到Spring框架，就像提起一位久经沙场的老将，它几乎成了企业级应用开发的代名词。那么，这个被无数开发者膜拜的框架究竟有何独特之处？今天，我...

「Spring认证」Spring 框架概述: Spring是最流行的企业Java应用程序开发框架。全球数以百万计的开发人员使用SpringFramework来创建高性能、易于测试和可重用的代码。Spring框架是一个开源的Java...

学习Spring框架这一篇就够了: 1.spring概述1.1Spring是什么（理解）...

Spring框架双核解析:IOC与AOP的本质与实战: #Spring核心#IOC容器#AOP编程#Java框架设计...

Spring Boot与传统Spring框架的对比:探索Java开发的新境界: SpringBoot与传统Spring框架的对比：探索Java开发的新境界在Java生态系统中，Spring框架无疑是一个里程碑式的存在。从最初的简单依赖注入容器，到如今覆盖企业级开发方方面面的庞大...

Spring MVC框架源码深度剖析:从入门到精通: SpringMVC框架源码深度剖析：从入门到精通SpringMVC框架简介SpringMVC作为Spring框架的一部分，为构建Web应用程序提供了强大且灵活的支持。它遵循MVC（Model-V...

Spring框架入门: 一.spring是什么？Spring是分层...

程序员必知必会技能之Spring框架基础——面向切面编程!: 面向切面编程AOP（AspectOrientedProgramming）与OOP（ObjectOrientedProgramming，面向对象编程）相辅相成。AOP提供了与OOP不同的抽象软件结...

Spring Security安全框架深度解读:为你的应用穿上“钢铁铠甲”: SpringSecurity安全框架深度解读：为你的应用穿上“钢铁铠甲”在现代网络世界里，保护我们的应用程序免受各种威胁攻击至关重要。而在这个过程中，SpringSecurity框架无疑是我们最可...

Spring框架的设计哲学与实现:打造轻量级的企业级Java应用: Spring框架的设计哲学与实现：打造轻量级的企业级Java应用Spring框架自2003年诞生以来，已成为企业级Java应用开发的代名词。它不仅仅是一个框架，更是一种设计理念和哲学的体现。本文将带你...

Spring框架深度解析:从核心原理到底层实现的全方位避坑指南: 一、Spring框架核心概念解析1.控制反转（IoC）与依赖注入（DI）Spring的核心思想是通过IoC容器管理对象的生命周期和依赖关系。传统开发中，对象通过new主动创建依赖对象，导致高耦合；而S...

Java框架 —— Spring简介: 简介一般来说，Spring指的是SpringFramework，它提供了很多功能，例如：控制反转（IOC）、依赖注入...

Spring 框架概述，模块划分: Spring框架以控制反转（InversionofControl，IoC）和面向切面编程（Aspect-OrientedProgramming，AOP）为核心，旨在简化企业级应用开发，使开发者...

spring框架怎么实现依赖注入?: 依赖注入的作用就是在使用Spring框架创建对象时，动态的将其所依赖的对象注入到Bean组件中，其实现方式通常有两种，一种是属性setter方法注入，另一种是构造方法注入。具体介绍如下：●属性set...

Spring框架详解: 　　Spring是一种开放源码框架，旨在解决企业应用程序开发的复杂性。一个主要优点就是它的分层体系结构，层次结构让你可以选择要用的组件，同时也为J2EE应用程序开发提供了集成框架。　　Spring特征...

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

一周热门

最近发表

首页
收录
顶部