子div浮动使父层div高度丢失解决办法

最新推荐文章于 2024-10-30 16:57:22 发布

转载最新推荐文章于 2024-10-30 16:57:22 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/itxti/blog/185128

本文介绍了一种使用CSS伪元素after来实现清除浮动的方法。通过在父级元素中定义zoom属性并结合after伪元素，可以有效地解决浮动元素引起的布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

父层定义一个after伪元素

classname{zoom: 1;}

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

转载于:https://my.oschina.net/itxti/blog/185128

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33724659

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS之浮动及高度塌陷

qq_53977993的博客

10-20

658

本章主要介绍的是浮动的高度塌陷和清除浮动，有兴趣的小伙伴可以多看一看。

CSS-高度塌陷布局乱问题详解

主营前端方向，技术栈是vue

11-15

1121

高度塌陷布局乱问题(子元素浮动无法撑起父元素高度、方法1zoom、方法2clear: both清浮动、方法3after伪类添加空白元素清除浮动、最终方案clearfix)

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

开发常见问题（三）：元素全部浮动，会导致父元素的高度丢失

weixin_46513664的博客

03-17

293

清除浮动常用方法 1. 定高法给父元素一个高度 2. 额外标签法利用属性 clear:both 这个属性只能给块元素在浮动元素的父元素后面添加 <div style="clear: both"></div> 缺点：空余标签太多 3. overflow:hidden BFC规则哪些元素可以触发： 1. 根元素或其它包含它的元素 2. position是absolut...

:after伪类+content内容生成经典应用举例

ajo49838的博客

10-19

811

by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=1136 一、简单说说content内容生成 content内容生成就是通过content属性生成内容，content属性早在CSS2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。...

解决子级用css float浮动而父级div没高度不能自适应高度

shilianweiyao的专栏

05-18

576

方法一：对父级设置固定高度 - TOP 此方法可用于能确定父级div内子级对象高度。假如以上案例，我们知道内部div高度100px,那对父级设置css height为100px看看效果。 1、完整div+css实例html代码（对父div加高度）： > html> head> meta charset="utf-8" /> title>父div不自适应高度实例titl

子元素float后父元素丢失高度

丑哥最风骚的专栏

04-04

889

111 222

某个div子元素设置浮动，让父div任然有高度的方法

qq_36566924的博客

09-24

984

1.在该div下面加上伪类： .clear:after{ content: "."; height: 0; visibility: hidden; display: block; clear: both; } 2...

firefox中div+css的外层背景色不见的解决方法

09-25

总之，Firefox中的外层`div`背景色丢失问题可以通过`overflow:hidden`或添加清浮动的`div`来解决，这些方法主要是为了确保外层`div`能正确包裹其浮动的子元素，从而显示完整的背景色。理解浏览器之间的解析差异以及...

使用CSS的overflow属性防止float撑开div的方法

09-24

然而，由于浮动元素不再占据其父容器的垂直空间，如果父容器中没有其他非浮动内容，该父容器的高度将会变为0，导致父容器无法包裹住浮动的子元素。这就是所谓的“浮动塌陷”。解决“浮动塌陷”的方法之一就是使用`...

CSS-float浮动和高度塌陷问题详解

主营前端方向，技术栈是vue

11-21

1102

float浮动和高度塌陷问题详解(基本属性、环绕、脱离文档流撑开内容，子浮父塌页面混乱，法1开zoom，法2clear:both，最终方案多功能clearfix)

DIV浮动后父DIV高度自动失效解决方案

邢明权博客

04-24

8529

今天在用dreamweaver写CSS代码的时候发现在居然给子DIV设置浮动后父DIV的高度自动居然失效，郁闷了半天，只好从google中去寻找答案，在google在钻了一下，最终得以解决。具体效果图如下：父DIV高度没有自动如下：父DIV高度自动后效果如下： html代码如下：无标题文档

css的浮动及高度塌陷

l15655495902的博客

03-06

440

子元素会脱离文档流，就不能再撑开父元素的高度，从而导致父元素的高度丢失，导致页面布局的混乱。当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素。一般情况，我们的父元素是不设置高度的，让其被内容自动撑开，如果子元素设置浮动了，可以通过after伪类向父元素的最后添加一个空白的块元素，然后对其清除浮动，元素也会脱离文档流，虽然可以撑开父元素，但是会导致父元素的宽度丢失。可以直接在高度塌陷的父元素的最后，添加一个块元素（div），方案一：给父元素设置固定高度,但不推荐使用。

浮动高度丢失及其解决方法

m0_50657441的博客

11-19

821

浮动元素：按照流水排列：寻找能最小放下的位置，浮动会半脱离文档流，遮住其他未浮动元素的结构,但不会遮住内容元素都设置浮动，会造成父元素高度丢失 解决办法： 1：让父级浮动起来，但是会让父级脱离文档流 2: 给父级添加 onerflow:hidden 但是不友好 3：給父元素设置display:inline-block 类似文本效果 BFC方案： 1：在浮动元素后添加空白块，clear:both 2:给父元素添加伪类：设置clear:both 3:给父元素添加position，relative或

CSS高度塌陷的介绍以及解决办法

L20220927Y的博客

10-18

288

CSS高度塌陷的介绍以及解决办法

div浮动后高度丧失问题

Dxy1239310216的博客

04-13

488

当子元素浮动后，它们不再占据文档流中的空间，这会导致父元素的高度塌陷。为了解决这个问题，有几种常见的方法可以让父元素自适应浮动子元素的高度。

div设置 float 后高度消失解决办法

weixin_40444253的博客

08-25

208

height:0;clear:both;

CSS 浮动的高度塌陷问题及解决方案