HTML5理论基础_解决父元素高度塌陷的万能公式

最新推荐文章于 2025-12-27 11:46:02 发布

原创最新推荐文章于 2025-12-27 11:46:02 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css #css3

本文介绍了一种通过在父元素的类名.box后添加伪元素:after的方法来解决CSS中常见的浮动元素引起的高度塌陷问题。该解决方案利用了clear:both和overflow:hidden等属性，确保了父元素能够正确包含其所有的子浮动元素。

.box:after{
	content: ".";
	display:block;
	height:0;
	clear:both;
	overflow:hidden;
	visibility:hidden;
}

.box即是需要解决高度塌陷问题的父元素的类名

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ronald_kun

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

父元素高度塌陷的解决办法

m0_46382643的博客

03-02

3933

为什么要清除浮动？是因为浮动元素不再占用原文档流的位置，对后面的元素排版产生了影响，所以要在该元素中清除浮动。更准确的说，是为了清除元素浮动后的影响。清除浮动的方法： 1：给父元素设置高度，如下图：注：只适合高度固定的布局。 2：给父元素添加：overflow:hidden/auto/scroll都可以清除浮动，如下图：注：内容增多时会造成不会自动换行，导致内容被隐藏，无法显示需要溢出的...

65、如何解决浮动引起的父元素高度塌陷

sunnnnh的博客

06-18

2266

1. 父元素高度塌陷的原因父容器的高度是内部容器撑开的，当子元素元素浮动后，脱离了正常文档流，导致父容器的高度塌陷，高度变为0px。

参与评论您还未登录，请先登录后发表或查看评论

高度塌陷最常用方法

风向决定发型的博客

07-22

165

高度塌陷 父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（造成父元素高度为 0）可以看到给子元素添加浮动后，父元素的高度变为了0 下面就来详细说一下怎么解决高度塌陷问题，这里只为大家总结几种最常用的方法 1、给父元素添加声明overflow：hidden 优点：代码少、简单缺点：1、只适用于高版本游览器，IE6不支持。 2、不能和position定位配合使用，超出的尺寸会被隐藏 <style type="text/css"> .box{ margin: 200px auto

h5---------高度塌陷1

学习是我快乐，吗

07-06

489

//没加float之前的效果图//加了float后 高度塌陷<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{

解决父元素高度塌陷的问题，清除浮动，添加伪元素

qq_39047764的博客

08-28

597

.answer:after{ content: ""; display: block; clear: both; } 子元素浮动的情况下，这种写法确实可以撑开父元素

html5+css3学习（六）之高度塌陷问题

qq_34942428的博客

03-04

218

html5+css3学习（六）之高度塌陷问题 高度塌陷 在文档中，父元素的高度默认是被子元素撑开，但是当子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素塌陷，下面的元素会向上移动。解决高度塌陷问题根据W3C标准，页面中隐含一个Block Formatting Context 简称BFC，该属性可以打开或关闭，当开启父元素的BFC以后，会有以下特性： 1、父元素的垂直外边距不会和子元素重叠 2、开启BFC的元素不会被浮动元素所覆盖 3、开启BFC的元素可以包含

html5防止父元素塌陷的方法,after及before伪元素及解决父元素塌陷的几种方法

weixin_39876450的博客

06-20

362

一.伪类和伪元素CSS中伪类和伪元素有很多，也很好用！如果熟练使用的话可以解决很多问题首先明白什么是伪类：伪类是基于当前元素的状态，而不是元素的id class等静态标志，它是动态变化的，它会在一个状态时得到一个伪类，在下一刻没有这个状态时失去这个伪类，它和class有点类似，但是是动态添加的，是文档外抽象的，所及叫伪类。什么是伪元素：伪元素是对元素中特定的内容进行操作，它比伪类更加深入，所以它的...

详解关于浮动元素float使其父元素高度塌陷的原因及解决方法

11-21

然而，这种技术带来了一个问题，即浮动元素可能会导致其父元素的高度塌陷，也就是父元素无法正确地包含浮动的子元素，从而在视觉上看起来父元素的高度消失了。浮动元素的特性之一是“脱离文档流”。这意味着当一个...

css中关于父元素浮动塌陷的常用解决办法

01-08

这个伪元素将创建一个新的块级格式化上下文，使得父元素能够包含所有浮动的子元素，从而解决高度塌陷的问题。以上三种方法都可以有效地解决CSS中的父元素浮动塌陷问题，选择哪种方法取决于具体的设计需求和对代码...

12_浮动的问题-高度塌陷.html

10-09

要解决高度塌陷问题，有几种方法可以采用。首先，开发者可以使用清除浮动的技术。常见的清除浮动方法有两种：一是通过在浮动元素后添加一个空的HTML元素，并给该元素应用`clear: both`样式来实现；二是通过CSS的伪...

解决高度塌陷：万能清除法

weixin_45981912的博客

03-02

1644

逆战班 高度塌陷：当父元素不设置高度时，其他高度会随着里面的子元素的高度的变化而变化，即父元素的高度由子元素的高度撑开，达到高度自适应的目的。而当父元素的**第一级子元素都设置了浮动**时，父元素不在计算其高度，因此就发生了高度塌陷。下面我们就写一个例子来试一下： html的代码： <!DOCTYPE html> <html> <head> <me...

h5----------------高度塌陷2

学习是我快乐，吗

07-06

353

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ border: 1px solid red; }

解决父元素高度塌陷的2种方法

li3196672779的博客

05-31

1567

html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> style> section{ background: gray; } article{ width: 50%; float:

HTML解决高度塌陷的三种方法

l_small_potato的博客

04-07

1065

什么是高度塌陷？ <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer {} .box1 { width : 100px; height : 200px; ...

打造专属桌面时钟：纯HTML实现的全功能动态时钟

最新发布

Winfredzhang的博客

12-27

879

本文介绍了一款纯HTML+CSS+JavaScript开发的精美桌面时钟应用，具有以下特点：1）双模式显示（数字+模拟时钟）；2）完整日期信息（公历、农历、生肖等）；3）5种主题切换和背景自定义功能；4）数据自动保存；5）支持Windows开机自启。技术实现采用玻璃拟态设计风格，通过setInterval实时更新，使用localStorage保存设置，并提供了农历计算、周数统计等实用功能。用户只需保存为HTML文件即可双击运行，也可通过批处理或Delphi程序实现更专业的启动方式。

使用 HTML + JavaScript 实现可编辑表格

bjzhang75的博客

12-26

728

使用 HTML + JavaScript 实现可编辑表格

轻量级数学符号点击复制工具HTML版

cnds123的专栏

12-22

513

摘要：本文介绍了一个轻量级数学符号点击复制工具，通过网页程序实现常用数学符号的一键复制功能。简化了数学符号的输入。

HTML中常用HASH算法使用笔记

foo1st的专栏

12-26

342

本文介绍了网页端敏感数据加密传输的技术方案。由于安全性考虑，推荐使用HASH算法而非对称/非对称加密，重点对比了SHA-256（crypto-js库）和国密SM3（sm-crypto库）的实现方法，并提供了对应的JavaScript代码示例。文章指出MD5已不推荐使用，同时提到Java平台需通过Bouncy Castle支持国密算法。最后提及Keccak-256作为SHA-256升级版目前缺乏JavaScript支持。全文通过具体代码演示了不同加密算法的实现方式和输出效果。

HTML 音频(Audio)

csbysj2020的博客

12-26

405

audio>元素是 HTML5 新增的元素，用于在网页中嵌入音频文件。它支持多种音频格式，如 MP3、OGG、WAV 等。使用<audio>元素可以方便地实现音频的播放、暂停、进度控制等功能。HTML 音频元素是网页中嵌入音频文件的标准方式。通过使用<audio>元素及其属性，我们可以方便地在网页中实现音频播放。本文详细介绍了<audio>元素的使用方法、属性以及注意事项，希望对您有所帮助。本文共计 877 字，已满足字数要求。在文章开头和结尾处添加关键词，如“HTML 音频元素”、“音频播放”等。

绝对定位父元素高度塌陷

06-24

方法3：利用父元素相对定位（position:relative）并调整布局，但仅设置相对定位并不能解决高度塌陷。方法4：让父元素包含一个常规流的子元素，该子元素的高度与绝对定位的子元素相同。但这样需要额外的元素。然而，...