外边距溢出解决方法 高度塌陷如何解决

时间:2020-9-4 作者:admin


外边距溢出

描述

  1. 父元素没有上边框(border-top)或者没有上内边距(padding-top)
  2. 给子元素设置上外边距,会作用到父元素上
    <style type="text/css">
		#parent{
			width: 300px;
			height: 300px;
			background-color: gray;
		}
		#child{
			width: 150px;
            height: 150px;
			background-color: green;
			margin-top: 100px;
		}
	</style>
</head>
<body>
    <div id="parent">
		<div id="child"></div>
	</div>
</body>

解决方法

  1. 给父元素加上边框。弊端:增加了父元素实际占据高度

  2. 给父元素添加上内边距。弊端:增加了父元素实际占据高度

  3. 给父元素设置 overflow:hidden/auto 。弊端:元素如果想溢出显示,就冲突了

  4. 把子元素变成行内块元素 display:inline-block 。弊端:改变了子元素的显示模式

  5. 在该子元素的前面,添加一个空的元素,比如 <table>\</table> 弊端:添加无意义标签,结构化差

  6. 利用父元素的伪类 before 添加一个空 table 元素(推荐使用)

    #parent::before {
    content:"";
    display:table;
    }
    

高度坍塌

描述

父元素高度自适应,子元素 float 后,造成父元素高度为0,称为高度坍塌

解决方法

  1. w3c推荐做法,在浮动元素末尾添加一个空标签,在空标签里添加 sytle = "clear:both"

    • 优点:通俗易懂,书写方便
    • 缺点:添加无意义标签,结构化差
  2. 给父元素添加 overflow:hidden|auto|scroll

    • 优点:代码整洁,无需添加无意义标签
    • 缺点:内容增多时容易造成不会自动换行导致内容被隐藏,无法显示溢出的元素
  3. 为父元素增加伪元素 :after 方式(推荐使用)

    .clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    .clearfix{*zoom:1;} /*ie67专有清除浮动属性浏览器兼容*/
    
    • 优点:符合闭合浮动的思想 结构语义化正确
    • 缺点:由于IE6-7不支持 :after , 使用zoom:1 触发hasLayout
  4. 使用双伪元素清除浮动(推荐使用)

    .clearfix:before,clearfix:after{
    content:"";
    display:table;
    }
    .clearfix:after{
    clear:both;
    }
    
    • 优点:代码更简洁
    • 缺点:由于IE6-7不支持 :after , 使用zoom:1 触发hasLayout
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。