百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

CSS中清除浮动的几种方法，快来学习一下吧

yuyutoo 2025-04-06 00:10 14 浏览 0 评论

前言

首先我们通过一张图来解释下元素浮动是什么样的状态。

元素浮动情况

上图的html部分代码为：

html代码

css部分代码为：

css代码

通过上面的图片可以看出，当内部的div设置float后，外部的元素的就会受到以下影响：

  • 背景不能显示

  • 边框不能被撑开

  • margin和padding设置的值不能正确显示

元素浮动的坏处

如果不清除元素浮动的话，浮动层后面的非浮动层内容就有可能被覆盖，造成页面的排版混乱。

例如在上面的例子中再加一个非浮动的div，就会发现该div被前面的三个浮动div覆盖住。

因为浮动，后面的div被覆盖

既然会出现这种情况，我们就应该设法清除掉元素的浮动。

方法1-父级元素设定定高

我们可以给父级元素.outer设置为定高，这样就可以不影响后面的非浮动元素。.outer的样式为：

设置定高

达到的效果为

清楚浮动之后

虽然这种方法可以清楚浮动，但是对父元素设置定高会有很多的限制，如果内层div的高度变化，则需要手动修改外层div的高度，相对来说有点麻烦，因此这种方法并不推荐。

方法2-添加新元素，设置clear:both

在父元素内部的末尾处添加一个新的div，并设置其clear: both;属性。

添加一个新的div

该新增div的css属性为：

新增div的css属性

利用该方法同样可以达到清楚浮动的效果，但是由于会新增DOM元素，这种方法也不推荐。

方法3-父级元素使用overflow:hidden属性

在父级元素上使用overflow:hidden属性，准确来说只要不给overflow属性设置为visible都可以清除元素浮动。

设置overflow: hidden

使用这种方法可以少写很多css样式代码，同时不会新增DOM元素，因此推荐使用这种方式。

方法4-对父元素使用伪元素

通过对父元素使用:after伪元素，同样可以达到清除浮动的效果。

伪元素清楚浮动

以上方法在伪元素中，通过设置clear与overflow属性来实现。方法4在实际的项目中使用的频率最高，因此极大的推荐使用方法4来清除元素浮动。

其他方法

看到网上有的资料介绍，通过设置父元素为浮动，或者设置父元素为absolute定位，这两种方法只是能显示父元素而已，但父元素同样会覆盖到后面的非浮动元素，因此这两种方法严格意义来说并不算清除浮动的方法。

总结

今天这篇文章主要介绍了几种通过CSS来清除元素浮动的方法，你掌握了吗？

相关推荐

深度解读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特征...

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

一周热门
最近发表
标签列表