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

最新推荐文章于 2023-09-04 20:05:38 发布
最新推荐文章于 2023-09-04 20:05:38 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： css布局 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        section{
            background: gray;
        }
        article{
            width: 50%;
            float: left;
        }
    </style>
</head>
<body>
    <section>
        <article>
            <img src="img/test.jpg"width="100px" alt="aa">
            <h2>蓝鸡腿</h2>
            <p>穷爸爸:"你要好好学习,以后就能找一份好工作养活自己。"驱动学习的力量是恐惧</p>
        </article>
        <article>
            <img src="img/test.jpg"width="100px" alt="aa">
            <h2>红鸡腿</h2>
            <p>富爸爸:"你要好好学习,以后就能开自己的公司，"驱动力量是爱</p>
        </article>
    </section>
</body>
</html>
 

//
 

会发现 子元素浮动后 背景不见了，因为父元素的高度没了
 

解决方法1:	父元素添加  overflow: hidden; 属性
 

	2: 	父元素添加     
 

        section::after{
                    content: "";
                    display: table;
                    clear: both;
                }



                

        

        

    

  


    

      

        

            

              
                
                  li3196672779
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

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

				
			

			

				

					m0_46382643的博客
				

				

					03-02
					
					3803
					
				

			

		

		

			
				
为什么要清除浮动？是因为浮动元素不再占用原文档流的位置，对后面的元素排版产生了影响，所以要在该元素中清除浮动。更准确的说，是为了清除元素浮动后的影响。
清除浮动的方法：
1：给父元素设置高度，如下图：

注：只适合高度固定的布局。
2：给父元素添加：overflow:hidden/auto/scroll都可以清除浮动，如下图：

注：内容增多时会造成不会自动换行，导致内容被隐藏，无法显示需要溢出的...

			
		

	



                

              
                



	

		

			

				
					
CSS中的定位和解决父元素高度塌陷

				
			

			

				

					QyangR1123的博客
				

				

					02-27
					
					5306
					
				

			

		

		

			
				
在CSS中，Position 属性经常会用到，主要是绝对定位和相对定位，简单的使用都没有问题，尤其嵌套起来，就会有些混乱，今记录总结一下。

1、相对定位( position: relative;)

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

relative：生成相对定位的元素，相对于其正常(原来)位置进行定位。

2、绝对定位（position: absolute;）

绝对定位使元素的位置与文档流无关，因此不占..

			
		

	



                


  
              

                


	

		

			

				
					
解决子元素浮动造成父元素高度塌陷的问题的几种方法

				
			

			

				

					贪吃ღ大魔王
				

				

					04-15
					
					2666
					
				

			

		

		

			
				
解决子元素浮动造成父元素高度塌陷的问题的几种方法
第一种：clear清除浮动
            在浮动元素后的同级元素直接用clear清除前一元素的浮动

第二种：伪类清除浮动
            一个父级元素内所有子元素都为浮动元素，则在父级元素尾部自动创建一个非浮动块状元素

第三种：子级方法
            在子元素的最后添加一个高度为0的子元素，并且让他清除浮动

第四种：父级方法
            （1）给父元素设置display:inline-block; 

     

			
		

	





	

		

			

				
					
消除父元素塌陷现象

				
			

			

				

					weixin_43918847的博客
				

				

					01-10
					
					316
					
				

			

		

		

			
				
我们有时会遇到这样的情况：当我们对子元素设置margin-top：100px; 时，子元素相对于父元素位置不变，但是父元素却向下移动100px距离。
子元素设置margin前

子元素设置margin后

遇到这种情况有三种解决方法：
1.可以为父元素定义一个上边距
border: 1px solid transparent;

2可以给父元素设置一个padding值
padding-top:1p...

			
		

	



		

			
		



	

		

			

				
					
css清除父元素盒子塌陷的方法

					
最新发布

				
			

			

				

					weixin_66514297的博客
				

				

					09-04
					
					59
					
				

			

		

		

			
				
（1）额外标签法：在父元素内容最后面加一个块级元素设置css属性为clear：both。(3)双为元素法：.box::after , .box::before{（2）单位元素法：给父盒子设置css属性为.box::after{(4)给父级添加overflow 溢出隐藏。

			
		

	





	

		

			

				
					
html解决父元素塌陷问题

				
			

			

				

					fangqi20170515的博客
				

				

					04-01
					
					1010
					
				

			

		

		

			
				
方法1：给塌陷的父元素的最后添加一个没有意义的子容器
both：清除所有。也可以只清除left/right，但是一般清除所有
.clearDiv {
  clear: both;//清除所有（也可以只清除）
}
.left{
	float:left;
}
.right{
	float:right;
}



<div>
	<div class=left></div>
	<div class=right></div>
	//添加的没有意义的子容器
	

			
		

	





	

		

			

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

				
			

			

				

					11-21
				

			

		

		

			
				
总的来说，浮动元素导致的父元素高度塌陷是CSS布局中的一个经典问题。通过理解浮动元素的特性，以及掌握上述的解决方法，开发者可以有效地处理这个问题，创建出稳定且符合预期的网页布局。在现代前端开发中，虽然有...

			
		

	





	

		

			

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

				
			

			

				

					11-21
				

			

		

		

			
				
以前布局经常会用到float进行布局，但是我们都知道使用浮动布局会存在一个问题-导致父元素高度坍塌 那我们一起来探究一下解决这个问题的方法！就先从文档流开始吧 一.定位的分类  普通流定位  浮动定位  相对定位  ...

			
		

	





	

		

			

				
					
父级元素未设置高度和宽度时高度塌陷问题的解决方法

				
			

			

				

					12-13
				

			

		

		

			
				
解决“高度塌陷”有多种策略，下面将详细介绍其中三种常用的方法：  1. **浮动父级元素**  这种方法较为奇特但确实有效。通过设置父级元素的浮动属性，如`float:left`或`float:right`，可以使其高度自动扩展以包裹...

			
		

	





	

		

			

				
					
高度塌陷的解决方法

				
			

			

				

					qq_67413159的博客
				

				

					04-03
					
					813
					
				

			

		

		

			
				
在文档流中父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就是多高但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时导致子元素无法撑起父元素，导致父元素塌陷。由于父元素的高度塌陷了，则父元素下面的元素都会向上移动，这样将会导致页面布局混乱的。

 所以在开发中一定要避免出现塌陷问题，解决塌陷问题：

 1、我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦写死父元素高度，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐...

			
		

	





	

		

			

				
					
高度塌陷问题的解决方案

				
			

			

				

					qq_43437571的博客
				

				

					07-28
					
					405
					
				

			

		

		

			
				
高度塌陷的原因：
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
解决方法：

法一. 将父元素的高度写死 	

缺点：父元素的高度将不能自动适应子元素的高度 	
不推荐

法二. 给父元素末尾添加一个空元素，并设置成清除浮动 	

缺点：添加了无意义标签，不易于后期维护，违背

			
		

	





	

		

			

				
					
父容器高度塌陷问题

				
			

			

				

					stSahana的博客
				

				

					08-12
					
					1576
					
				

			

		

		

			
				
父容器高度塌陷问题
  当子元素设置了float属性后，父元素会因子元素脱离文档流而发生塌陷问题，解决这种问题的方式有三种
1.在父容器后添加一个空div<div style="clear:both;"></div>2.给父容器设置overflow属性{ 
　　overflow:hidden; 
　　zoom:1; 
} 
3.设置after属性设置父元素的class属性为clearfix，并修改样

			
		

	





	

		

			

				
					
css防止浮动元素父元素高度塌陷的三个方法

				
			

			

				

					sun544404831的博客
				

				

					03-08
					
					4571
					
				

			

		

		

			
				
.div1{
   background-color:yellow;
   
   width:330px;
  }
  .div2{
   background-color:red;
   height:300px;
   width:300px;
   float:left;
  }



 
  
  
 

此时防止父元素高度塌陷的方法：
1，在di

			
		

	





	

		

			

				
					
解决父元素高度塌陷

				
			

			

				

					jdsfui的博客
				

				

					03-03
					
					548
					
				

			

		

		

			
				
方法1.
给父元素添加overflower：hieder
缺点：当子元素有定位设置，定位到父元素外面，不希望溢出部分溢出隐藏时就不行了
方法2.
在最后浮动的元素下方添加空div，并给该元素添加声明：
clear：both，height：0，overflow：hidder
缺点：在HTML结构文档中会形成很多冗余代码
方法3.
在父元素选择器上进行设置：
div:after{content：",”...

			
		

	





	

		

			

				
					
html中解决父元素高度问题,【CSS常见问题】三分钟解决CSS中float引起的父元素高度塌陷问题...

				
			

			

				

					weixin_29130369的博客
				

				

					06-07
					
					337
					
				

			

		

		

			
				
CSS前言相信很多同学在网页布局过程中都用过float浮动布局，float可以让我们很方便的去布局，但是同时也带来了很多的问题，虽然现在很多人都推荐用Flex布局来替代浮动布局(不了解Flex可以在这里看这里 阮一峰的网络日志)，但是IE11以下和一些低级别版本的浏览器对Flex的支持不太好，所以我们用好浮动布局还是很有必要的。这篇文章主要解决的是float的所引起的父容器高度塌陷问题，相信很多人...

			
		

	





	

		

			

				
					
浮动造成父级高度塌陷及其解决办法

				
			

			

				

					weixin_46421045的博客
				

				

					03-14
					
					188
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.txt{
				height:100px;
				background: pin...

			
		

	





	

		

			

				
					
css中高度塌陷解决方法

				
			

			

				

					qq_51489068的博客
				

				

					05-15
					
					551
					
				

			

		

		

			
				
高度塌陷的产生原因及解决方法

			
		

	





	

		

			

				
					
【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )

				
			

			

				

					让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 ) 
				

				

					04-13
					
					1297
					
				

			

		

		

			
				
一、外边距塌陷描述
1、没有塌陷的情况
2、外边距塌陷情况
二、传统方法解决外边距塌陷 - 为父容器 / 子元素设置内边距 / 边框
三、使用浮动解决外边距塌陷 - 为子元素设置浮动
四、使用绝对定位解决外边距塌陷 - 为子元素设置绝对定位


			
		

	





	

		

			

				
					
解决子元素浮动父元素高度塌陷的四种方法

				
			

			

				

					qq_48109675的博客
				

				

					08-25
					
					940
					
				

			

		

		

			
				
第一种：在浮动元素（孩子）下面增加一个空的div，对它清除浮动； 第二种：父级使用伪元素选择器清除（也相当于加了一个空的块级元素）

			
		

	





	

		

			

				
					
CSS高度塌陷的原因和解决方案

				
			

			

				

					
				

			

		

		

			
				
解决高度塌陷的问题有多种方法，下面我们将逐一分析三种方案的优缺点。  **方案一：给高度塌陷的元素添加属性 overflow:hidden;**  原理：因为 overflow:hidden; 能够触发 BFC（块级格式化上下文、独立的渲染区）。...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值