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

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

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

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个常见的布局问题：当子元素使用浮动属性时，可能导致其父元素高度丢失。为解决这一问题，可以通过给父元素设置 overflow:hidden 的样式来确保父元素能够正确包含所有子元素。

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

子元素在float后，父元素将丢失高度，这时需要在父元素中加上overflow:hidden

<div class="box" style="overflow:hidden;">
		<div class="float_left">111</div>
		<div class="float_right">222</div>
	</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

丑哥最风骚

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

float产生的高度塌陷问题解决方案（包含全部方法)

surymy

12-29

2808

一、什么是高度塌陷高度塌陷问题是f元素loat后很容易产生的一种现象，具体原因是：在设计网页时，父元素的高度一般不会被写死，我们希望它会根据子元素的内容多少自动变化。但是在浮动布局中，父元素的内容高度默认是被子元素撑开的，但子元素浮动后，便脱离了文档流，因此无法撑起父元素，从而导致父元素高度丢失。之后父元素下边的元素会自动上移，导致页面布局混乱。二、解决方法把父元素高度写死（闭环了属于是）推荐指数：0 BFC（Block Foematting Content）：块级格式化环境 clear：清除浮

html设置float后没有高度解决

····

03-27

1204

[url]http://www.chinaz.com/design/2008/1024/41932.shtml[/url] 2. 使用after伪类这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。这种方法兼容性一般，但经过各种 ha...

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

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

weixin_46513664的博客

03-17

293

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

float浮动之后高度自适应失效解决方案

weixin_34258838的博客

11-17

290

float浮动之后高度自适应失效解决方案 >>>>>>>>>>>>>>>>>>>>>>>>>>>>&a

CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

weixin_30338743的博客

06-21

先贴一个常见的浮动代码父元素div设置背景色为灰色#f1f1f1，子元素div分别设置不同的颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta htt...

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

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

11-21

1102

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

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

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

11-15

1121

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

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

2301_81146427的博客

10-30

575

本文主要讨论了 CSS 浮动的高度塌陷问题及解决方案。浮动元素会脱离文档流，可能导致父元素高度丢失。解决方案包括固定高度、父元素浮动和添加 overflow 属性。固定高度方法简单但不灵活，父元素浮动需注意布局， overflow 属性常用但需处理溢出。在实际应用中，你可以根据具体情况调整高度和其他样式属性。希望这篇博客对你有所帮助！

【CSS】高度塌陷及解决方案

南栀的博客

11-15

730

文章目录什么是高度塌陷解决高度塌陷什么是高度塌陷在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。父元素高度自适应(不写高度)，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。 <style type="text/css"> .box1 { /* 父元素未设置高度,高度由子元素撑开 */ b

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

weixin_33724659的博客

12-17

305

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

因浮动使得容器失去高度的解决方法

xiang6963的专栏

06-17

658

因为设置了左右浮动，造成了外容器高度失效或者边距失效。可以按如下方法解决。 1、给容器添加css：overflow:hidden; 2、容器本身也予以浮动。 3、在容器内最后追加清除浮动代码<div style="clear:both"></div> 4、利用after伪类。例如 clearfix{zoom:1} 一般情况下，如果父层内部有浮动(float)可能导致父层的高度为0，加上clearfix后就行了： <style type="text/css"&

解决float带来的父元素高度塌陷问题

qq_21696621的博客

08-22

439

1.为父元素添加高度。缺陷：高度要随子元素所有高度变化而变化 2.clear属性。使用：在浮动元素的同级元素添加clear属性。缺陷：添加了多余标签 3.为父元素添加overflow:hidden;zoom:1属性。缺陷：overflow:hidden;会自动截取超出父元素宽度的内容 4.为父元素添加相应的float属性。缺陷：用于父元素浮动，所以其下的兄弟元素会发生位置异位（不使用浮动）。...

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

m0_50657441的博客

11-19

821

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

如何清除浮动

weixin_40380115的博客

04-19

214

浮动元素浮动元素特点 1、浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以用浮动元素来设置文字环绕图片的效果； 2、元素设置浮动以后，将会从文档流中脱离。此时的块元素不再独占页面的一行，块元素的宽度和高度是由内容撑开。 3、当行内元素（如：span）脱离文档流以后会变成块元素，特点和块元素一样，可以设置宽和高。浮动元素的高度塌陷问题在浮动布局中，父元素的高度默认是被子元素撑开，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。父元素

解决高度塌陷的方法

m0_72975897的博客

08-10

969

解决高度塌陷的三种方法

float布局：高度塌陷以及解决办法

QAQ_Monk的博客

09-24

3667

Well，利用float浮动来实现多个块元素横向布局已经是习以为常的事情了，同时我相信许多刚刚接触float元素或者甚至刚刚才入行的小伙伴们会遇到一系列的问题。例如这样：（这孩子真霸道）再比如这样：（坑爹！这是要闹哪样！）其实类似问题的解决方法在网上一大堆，俗话说：有事没事找度娘！这里我只是简单的总结一下而已，毕竟鄙人也是一枚刚跳进前端的伪小白，同时算是给一些前端新

解决浮动导致父元素高度坍塌的几种方法

_andylala的博客

05-24

6792

一、文档流与浮动 1、’什么是文档流？ &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;在html中，文档流也可以叫做标准流或普通流。元素的显示方式是自上而下，从左到右，其中，块级元素默认占据一行，行内或行内块级元素只占据内容部分的内容或自身的所占据的部分，并不会像块级元素一样霸道的占据一行，其实这也跟自然现象中的瀑布自上而下流动是一个道理^_^。 2、不安分的浮动 &amp;nbs

float浮动子元素后导致父元素无高度(0)解决方法

资深程序员

07-14

5689

前言 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。使用float左浮动后，元素便脱离了...

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