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

最新推荐文章于 2024-10-11 13:38:20 发布
最新推荐文章于 2024-10-11 13:38:20 发布
阅读量414 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21696621/article/details/81942075
版权

1.为父元素添加高度。缺陷：高度要随子元素所有高度变化而变化

2.clear属性。使用：在浮动元素的同级元素添加clear属性。缺陷：添加了多余标签

3.为父元素添加overflow:hidden;zoom:1属性。缺陷：overflow:hidden;会自动截取超出父元素宽度的内容

4.为父元素添加相应的float属性。缺陷：用于父元素浮动，所以其下的兄弟元素会发生位置异位（不使用浮动）。处理方法：给改兄弟元素添加clear:both属性。

5.使用before::伪类（推荐使用）

qq_21696621
关注
专栏目录
父元素高度塌陷解决问题
weixin_43514933的博客
10-24 366
父元素高度塌陷解决问题 方法1：额外标签法 在最后一个浮动标签后，新加一个标签，给其设置clear：both；（不推荐） 优点：通俗易懂，方便 缺点：添加无意义标签，语义化差 2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐） 通过触发BFC方式，实现清除浮动 优点：代码简洁 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素 3.使用after伪元素清除浮动（推荐使用） 优点：符合闭合浮动思想，结构语义化正确 缺点：ie6-7不支持伪元素：a
float产生的高度塌陷问题解决方案（包含全部方法)
surymy
12-29 2699
一、什么是高度塌陷 高度塌陷问题是f元素loat后很容易产生的一种现象，具体原因是： 在设计网页时，父元素的高度一般不会被写死，我们希望它会根据子元素的内容多少自动变化。 但是在浮动布局中，父元素的内容高度默认是被子元素撑开的，但子元素浮动后，便脱离了文档流，因此无法撑起父元素，从而导致父元素高度丢失。之后父元素下边的元素会自动上移，导致页面布局混乱。 二、解决方法 把父元素高度写死（闭环了属于是）推荐指数：0 BFC（Block Foematting Content）：块级格式化环境 clear：清除浮
解决父元素高度塌陷
youhebuke225的博客
06-15 234
方法一 开启BFC box{ overflow:hidden; 　　zoom:1; } zoom:1开启IE6的hasLayout 开启BFC的方式有很多，我们记住overflow:hidden;就可以 方法二 使用伪元素撑开(推荐) .clearfix{ 　　zoom:1; } .clearfix:after{ 　　content:''; 　　display:block; 　　height:0; 　　font-size:0; 　　clear:both; 　　overflow:hidden;
css-子元素使用浮动（float）属性，父元素可能会高度塌陷（前端浮动后 不撑开父盒子）
最新发布
2301_76671906的博客
10-11 505
子元素使用浮动（float）属性，父元素可能会高度塌陷（前端浮动后 不撑开父盒子）
解决父级元素高度塌陷问题的方法
aochuotao9236的博客
08-11 190
如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零，也就是所谓的“高度塌陷”，如果父级元素包含背景或者边框，那么溢出的元素就不像父级元素的一部分了。解决“高度塌陷”的问题很简单： 1.浮动父级元素 如果让父级元素浮动，父级元素的高度就会扩大，直到完全包含它里面的浮动元素，虽然这个方法很奇怪，但是很有效。如果选择这种方法，一定要在该元素的下个元素添加cl...
怎么解决父元素引起的高度坍塌？
zybijiso666的博客
03-24 598
父元素高度坍塌通常是由于其内部的子元素使用了浮动（float）或绝对定位（absolute positioning）等属性导致的。这些属性会使子元素脱离文档流，从而导致父元素无法正确计算高度，从而造成高度坍塌。通过以上方法中的任何一种，您应该能够有效地解决父元素高度坍塌的问题。根据具体情况选择最适合的方法来解决您遇到的问题。：将父元素设置为相对定位（relative positioning）也可以解决高度坍塌的问题。
“父元素高度塌陷”问题
ajaj_xiaoxiaohei的博客
09-24 368
详解关于浮动元素float使其父元素高度塌陷的原因及解决方法
11-21
总的来说，浮动元素导致的父元素高度塌陷是CSS布局中的一个经典问题。通过理解浮动元素的特性，以及掌握上述的解决方法，开发者可以有效地处理这个问题，创建出稳定且符合预期的网页布局。在现代前端开发中，虽然有...
CSS中的定位和解决父元素高度塌陷
QyangR1123的博客
02-27 5409
在CSS中，Position 属性经常会用到，主要是绝对定位和相对定位，简单的使用都没有问题，尤其嵌套起来，就会有些混乱，今记录总结一下。 1、相对定位( position: relative;) 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 relative：生成相对定位的元素，相对于其正常(原来)位置进行定位。 2、绝对定位（position: absolute;） 绝对定位使元素的位置与文档流无关，因此不占..
父级元素未设置高度和宽度时高度塌陷问题的解决方法
12-13
在网页布局设计中，一个常见的问题就是所谓的“高度塌陷”（Height Collapsing），这通常发生在父级元素没有设置高度和宽度，并且其内部包含了浮动元素（如`float:left`或`float:right`）的情况下。当子元素浮动后，...
CSS高度塌陷问题（float塌陷&margin塌陷）
YANGMENGZHENG的博客
11-08 2556
一、什么是盒子高度塌陷？ 1、解释 当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。 2、代码示例 ...
父元素高度塌陷的解决办法
m0_46382643的博客
03-02 3823
为什么要清除浮动？是因为浮动元素不再占用原文档流的位置，对后面的元素排版产生了影响，所以要在该元素中清除浮动。更准确的说，是为了清除元素浮动后的影响。 清除浮动的方法： 1：给父元素设置高度，如下图： 注：只适合高度固定的布局。 2：给父元素添加：overflow:hidden/auto/scroll都可以清除浮动，如下图： 注：内容增多时会造成不会自动换行，导致内容被隐藏，无法显示需要溢出的...
解决浮动引起的父元素高度塌陷
q354636996的博客
09-01 277
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #nav{ backgro
前端Tip-父级元素的高度塌陷问题
weixin_38271901的博客
08-12 952
一、什么是高度塌陷？ 在文档流中，若父元素未设置高度，那么父元素的高度默认是被子元素撑开的（子多高，父多高）但当子元素设置浮动之后，子元素会完全脱离文档流，父元素还在文档流中，此时父元素的高度没有子元素撑起，从而导致父元素高度塌陷。（简单说：包含有浮动元素的上一级的元素高度为0，下面的元素就会上去，这样导致页面布局混乱）如下： <!--html代码--> <div class="father"> 我是父盒子 <div class="box
解决由float引起的“高度塌陷”问题
努力码代码的程序媛小艺
09-07 1202
“高度塌陷”是指父元素未设置高度和宽度，而且其只包含浮动的子元素时，该父元素的高度会产生“塌陷”.换言之，当元素不具有实际高度时，就会产生“高度塌陷”。 解决“高度塌陷”问题的方法有如下几个： 1.在父元素结束前加一个高度为0，宽度为0，且clear:both的div。当然如果有未浮动的子元素，可以直接clear:both。 块1 块2 块3 .lef
父元素高度塌陷
mutouren_abc的博客
12-17 214
浮动元素使其父元素高度塌陷 情况描述： 给一个元素设置浮动之后float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。 原因： 当元素设置浮动后，会自动脱离文档流，翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况） 解决方法： .
解决父元素高度塌陷的问题，清除浮动，添加伪元素
qq_39047764的博客
08-28 553
.answer:after{     content: "";     display: block;     clear: both; }     子元素浮动的情况下，这种写法确实可以撑开父元素
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值