精华内容
下载资源
问答
  • 给父元素增加overflow样式, overflow:auto; 或者 overflow:hidden ;或者 overflow:scoll 子元素浮动: float:left;

    给父元素增加overflow样式,

     overflow:auto;            或者    

    overflow:hidden ;        或者

    overflow:scoll

    子元素浮动: float:left;

    或者:

    通过伪类after向元素得最后添加一个空白的块元素,然后对其清除浮动

    box:after{

       content:"";

       display:block;

       clear:both;

    }

    展开全文
  • 拥有父级div和3个子div。只知道child2的高度。... 已粘贴代码http://jsfiddle.net/586Cr/CSS父级div边框和高度塌陷提供了下面的代码。#parentt{background-color:#000000;border:4px solid #0000FF;}#ch...

    拥有父级div和3个子div。只知道child2的高度。希望child1和child3具有与降低高度相同的高度。父母的边界也在崩溃。希望父母的边界在孩子周围可见。 已粘贴代码http://jsfiddle.net/586Cr/CSS父级div边框和高度塌陷

    提供了下面的代码。

    #parentt{

    background-color:#000000;

    border:4px solid #0000FF;

    }

    #child1{

    background-color:#000000;

    border:4px solid #FF0000;

    float:left;

    width:25%;

    }

    #child2{

    background-color:#000000;

    border:4px solid #FF0000;

    float:left;

    width:30%;

    height:100px;

    }

    #child3{

    background-color:#000000;

    border:4px solid #FF0000;

    width:25%;

    float:left;

    }

    .trans60 {

    zoom: 1;

    filter: alpha(opacity=60);

    opacity: 0.6;

    }

    .trans100 {

    zoom: 1;

    filter: alpha(opacity=100);

    opacity: 1.0;

    }

    child1
    child2
    child3

    2013-11-15

    Arav

    +0

    我想op得到的答案比这个! –

    展开全文
  • 什么是高度塌陷? 当父元素高度自适应,子元素浮动后,造成父元素高度为0,称为高度塌陷高度塌陷怎么解决? 方法一:给父元素一个固定的高度 缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,不推荐...
  • <div class="box2"></div> </div> <div class="box3"></div> 第二种方式:通过clear属性来清除浮动 <!doctype html> <title></title> .box1{ border:1px solid red; } .box2{ ...

    第一种方式:开启BFC属性

    <!doctype html>
    <html>
    	<head>
    		<title></title>
    		<mata charset="utf-8"/>
    		<style type="text/css">
    		.box1{
    			border:10px red solid;
    			/*
    				根据W3C的标准,在页面中的一个隐含的属性叫做Block Formatting Context
    				简称BFC,该属性可以设置打开或者关闭,默认关闭的。
    				当开启元素的BFC以后,元素将会具有如下的特性:
    				1.父元素的垂直外边距不会和子元素重叠
    				2.开启BFC的元素不会被浮动元素所覆盖
    				3.开启BFC的元素可以包含浮动的子元素
    				
    			推荐开启方式:将overflow设置为hidden
    				可以保证父元素的宽度不丢失,同时不会导致下边的元素上移
    			*/
    			overflow:hidden;
    			/*兼容IE6及其以下版本*/
    			zoom:1;
    		}
    		.box2{
    			width:100px;
    			height:100px;
    			background-color:blue;
                            /*设置向左浮动*/
                             float:left;
    		}
    		.box3{
    			height:200px;
    			background-color:yellow
    		}
    		</style>
    	</head>
    	<body>
    		<div class="box1">
    			<div class="box2"></div>
    		</div>
    		<div class="box3"></div>
    	<body>
    </html>
    

    第二种方式:通过clear属性来清除浮动

    <!doctype html>
    <html>
    	<head>
    		<title></title>
    		<mata charset="utf-8"/>
    		<style type="text/css">
    		.box1{
    			border:1px solid red;
    		}
    		.box2{
    			width :100px;
    			height:100px;
    			background-color:blue;
    			float:left;
    		}
    		/*
    			通过after伪类,选中box1的后边
    			可以通过after伪类向元素的最后添加一个空白的块元素,
    			然后对其清除浮动
    		*/
    		.clearfix:after{
    			content:"";
    			display:block;
    			clear:both;
    		}
    		/*
    			兼容IE6(IE6不支持after伪类)
    		*/
    		.clearfix{
    			zoom:1;
    		}
    		</style>
    	</head>
    	<body>
    		<div class="box1 clearfix">
    			<div class="box2"></div>
    		</div>
    
    	<body>
    </html>


    展开全文
  • 高度塌陷

    2019-09-21 14:16:52
    高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的, 也就是子元素多高,父元素就多高 但是当为子元素设置浮动以后,子元素会完全脱离文档流, 此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷...

    (此为从学习视频中摘抄,如有雷同,纯属巧合)

    1. 高度塌陷

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

      所以在开发中,一定要避免出现高度塌陷的问题
      我们可以将父元素的高度写死,以避免塌陷的问题出现,
      但是一旦高度写死,父元素的高度将不能自动适应子元素的高度,所以这种方案不推荐使用

    2. 解决高度塌陷1

      根据w3c的标准,在页面中元素都有一个隐含的属性叫做Block Formatting Context
      简称BFC,该属性可以设置打开或者关闭,默认是关闭的。
      当开启元素的BFC以后,元素将会具有如下的特性:
      1.父元素的外边距不会和子元素重叠
      2.开启BFC的元素不会被浮动元素所覆盖
      3.开启BFC的元素可以包含浮动的子元素

      如何开启元素的BFC
      1.设置元素浮动
      -使用这种方式开启,虽然可以撑开父元素,但是会导致父元素的宽度丢失
      而且使用这种方式也会导致下边的元素上移,不能解决问题
      2.设置元素绝对定位
      3.设置元素为inline-block
      可以解决问题,但是会导致宽度丢失,不推荐使用这种方式
      4.将元素的overflow设置为一个非visible的值

      推荐方式:将overflow设置为hidden是副作用最小的开启BFC的方式
      例:overflow: hidden;

      但是在IE6及以下的浏览器并不支持BFC,所以使用这种方式不能兼容IE6
      在IE6中虽然没有BFC,但是具有一个隐含属性叫hasLayout
      该属性的作用和BFC类似,所以在IE6浏览器可以通过开hasLayout来解决该问题
      开启方式很多,直接使用一种副作用最小的:
      直接将元素的zoom设置为1即可

      zoom表示放大的意思,后边跟着一个数值,写几就将元素放大几倍
      zoom:1 表示不放大元素,但是通过该样式可以开启hasLayout
      zoom这个样式,只在IE中支持,其他浏览器都不支持
      例:zoom: 1;

      在IE6中,如果为元素指定了一个宽度,则会默认开启hasLayout

    3. 清除浮动

      由于受到box1浮动的影响,box2整体向上移动100px
      我们有时希望清除掉其他元素浮动对当前元素产生的影响,这时可以使用clear来完成功能
      clear可以用来清除其他浮动元素对当前元素的影响
      可选值:
      none,默认值,不清除浮动
      left,清除左侧浮动元素对当前元素的影响
      right,清除右侧浮动元素对当前元素的影响
      both,清除两侧浮动元素对当前元素的影响
                清除对他影响最大的那个元素的浮动

      清除box1浮动对box2产生的影响,在box2中设置
      清除浮动以后,元素会回到其他元素浮动之前的位置
      例:clear: left;

    4. 解决高度塌陷2

      可以直接在高度塌陷的父元素的最后,添加一个空白的div
      由于这个div并没有浮动,所以他是可以撑开父元素的高度的,
      然后在对其进行清除浮动,这样可以通过这个空白的div来撑开父元素的高度
      基本没有副作用

      使用这种方式,虽然可以解决问题,但是会在页面中添加多余的结构
      例:

    	<div class="box1">
    			<div class="box2"></div>
    			<div class="clear"></div>
    		</div>
    
    		<style type="text/css">
    			.box1{
    				border: 1px solid red;
    			}
    			.box2{
    				width: 100px;
    				height: 100px;
    				background-color: blue;
    				float: left;
    			}
    			.clear{
    				clear: both;	
    			}
    		</style>
    
    1. 解决高度塌陷3

    通过after伪类,选中box1的后边
    可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动,
    这样做和添加一个div的原理一样,可以达到一个相同的效果,
    而且不会在页面中添加多余的div,这是我们最推荐使用的方式,而且没有副作用
    例:

    			.clearfix:after{
    				/*添加一个内容*/
    				content: "";
    				/*转换为一个块元素*/
    				display: block;
    				/*清除两侧浮动*/
    				clear: both;
    			}
    			/*
    			 * 在IE6中不支持after伪类
    			 * 	所以在IE6中还需使用hasLayout来处理
    			 */
    			.clearfix{
    				zoom: 1;
    			}
    
    展开全文
  • 什么是高度塌陷 在文档流中,父元素的高度默认是由子元素撑开的,等于说子元素多高,父元素就多高,但是当为子元素设置了浮动之后,子元素会脱离文档流,此时,将会导致子元素无法撑起父元素的高度,会导致父元素的...
  • 高度塌陷: 场景:子元素有浮动,父元素没有设置高度或者设置最小高度,父元素...2、给出现高度塌陷的元素里面,放在浮动元素的后面,添加空的div,并且给div{clear:both} 原理:忽略上面的浮动元素预留出来的空间 弊.
  • 一、什么是高度塌陷? 在文档流中,父元素的高度默认是被子元素撑开的,即子元素多高,父元素多高。但是为子元素设置浮动后,子元素会完全脱离文档流,此时会导致子元素无法撑起父元素,父元素高度塌陷。 <div ...
  • 1 高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷...
  • 什么是高度塌陷? 父元素高度自适应,子元素 float 后,造成父元素高度为0,称为高度塌陷问题。 如何来解决高度塌陷? 方案一:给父元素一个固定的高度 缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,...
  • HTML高度塌陷

    2019-09-11 13:16:14
    描述 父div靠子div撑开,子div全部设置浮动,父div因没有高度而出现塌陷的情况 解决 1. 父div设置overflow: hidden 2. clear: left | right | both | none 清除浮动 ...
  • 但是由于1,2,3设置了float属性,导致红色边框的div高度塌陷。 紫色部分的起始位置:上下有两条边框,于是在中间部分开始 虽然红色框没有高度,但是它有边框的高度,因此占有一部分空间。蓝色div因此只能在红色部分...
  • 1 高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷...
  • 高度塌陷总结

    2021-07-22 22:42:47
    清除高度塌陷的三种方法: ...给产生高度塌陷的元素最后面添加一个div: 并且给它设置高度为0,clear:both【清除浮动对添加div的影响】 产生原理:清除浮动带来的影响 3.万能法: :after{ content:'.';...
  • 元素脱离文档流导致的高度塌陷问题1.问题描述:在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父...
  • *关于网页设置高度自适应过程中的高度塌陷问题的解决方法及解释 */ 出现的场景:  当子元素有浮动,父元素没有设置高度,或者设置的是最小高度的时候,父元素会出现高度塌陷问题。 (IE6里面一般不会出现高度...
  • 高度塌陷问题

    2021-03-01 20:50:50
    1. 高度塌陷 当父元素高度自适应,子元素 float 后,造成父元素高度为0,称为高度塌陷。 如何来解决高度塌陷? 方案一:给父元素一个固定的高度 缺点:给父元素固定高度违背了高度自适应的原则,不够灵活 方案二:给...
  • 今天学习了如何解决HTML页面子元素浮动时由于脱离文档流导致的其父元素(未设置宽高)高度塌陷的问题。接下来,我们来谈谈这个问题的解决步骤。首先我们先引出一个概念:Block Fomatting Context,我们称为块格式化上...
  • CSS中高度塌陷

    2019-07-27 16:57:08
    CSS中高度塌陷 1.高度塌陷产生的原因:子元素浮动,父元素高度自适应。 2.解决方法: (1)给父元素添加overflow:hidden; 优点:简单易写 缺点:如果父元素中有内容溢出会被裁切掉。 (2)给浮动的元素后边添加一...
  • 什么是高度塌陷?  父元素高度自适应,子元素 float 后,造成父元素高度为0,称为高度塌陷问题。   如何来解决高度塌陷? 方案一:给父元素一个固定的高度  缺点:给父元素固定高度违背了高度自适应的原则,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,522
精华内容 3,808
关键字:

div高度塌陷