关于清除浮动 外边距 塌陷的问题

一、html

	<div class="left">div1</div>
	<div class="left">div2</div>
	<footer>
  	    <p>66666666666666666666666</p>
	</footer>

二、css

	.left{
		width: 200px;
		height: 200px;
		color: #fff;
		background: red;
		margin: 0 10px 0 0px;
		float: left;

	}
	footer{
		clear: both;
		margin-top: 100px;
		/*overflow: hidden;*/
	}

三、问题

给footer清除浮动后,footer的外边距不起作用了(外边距塌陷,clearance)

四、overflow:hidden

给清除浮动的footer加一个 overflow:hidden 属性就可以了。

  

  

时间: 2024-10-06 09:00:33

关于清除浮动 外边距 塌陷的问题的相关文章

关于CSS外边距塌陷的问题

关于CSS外边距塌陷(合并)的问题主要资料来源:https://developer.mozilla.org... 定义 块的顶部外边距和底部外边距有时被组合(折叠)为单个边框,其大小是组合到其中的最大外边距,这种行为称为外边距塌陷(合并) 发生外边距塌陷的三种情况 相邻的兄弟姐妹元素 <style> * { margin: 0; } .box1 { width: 150px; height: 100px; margin-bottom: 50px; /* border: 1px solid #0

外边距塌陷问题

外边距塌陷的问题,在工作的过程中经常性遇到,也是让前端开发人员比较讨厌的一个问题,那么什么是外边距塌陷呢?常遇见的外边距塌陷共有两个现象: 现象一: 两个同级盒子,上下排列,上面的盒子给margin-bottom 下面的盒子给margin-top,那么他们两个的间距会重叠,以大的那个计算.案例如下,首先我先写两个盒子,代码如下: 1 <div class="box1"> 2 我是盒子1 3 </div> 4 <div class="box2&qu

IE6/7中li浮动外边距无法撑开ul的解决方法

昨天群里有人提出了这样的问题: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&

关于overflow:hidden的作用(溢出隐藏,清除浮动,解决外边塌陷等等)

1.overflow:hidden  溢出隐藏 给一个元素中设置overflow:hidden ,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. 代码如下: 运行结果如下: 2. overflow:hidden 清除浮动 一般而言,父级元素不设置高度时,高度由随内容增加自适应高度.当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0.那么问题来了,如下: 运行结果如下: 如上,由于父级元素

CSS外边距合并(塌陷/margin越界)

原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5.出现的情况 1.什么是外边距合并?(折叠外边距) 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.而左右外边距不合并. 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距.这种

css 清除浮动 定位 z-index属性

当一个父元素包含多个浮动的子元素的时候,子元素的浮动确定了他们的位置,但是子元素不会影响父元素的宽度,使父元素塌陷,从而使父元素高度为0,这个时候可以为父元素清除浮动,从而阻止父元素塌陷. 1.overflow方法 对父元素设置overflow:hidden: 但是overflow清除浮动会有一些缺点. 2.clearfix方法 清除浮动更好的方法是clearfix "clearfix"技巧是基于在父元素上使用":before"和":after"

CSS之盒模型边框,内边距,外边距,阴影,圆角

盒子模型 盒子模型 盒子模型有元素内容.边框(border).内边距(padding).外边距(margin)组成: 盒子里面的文字和图片等元素是内容区域: 盒子的厚度 我们称为 盒子的边框: 盒子内容与盒子之间的距离是内边距: 盒子与盒子之间的距离是外边距: 标准盒子模型 盒子边框(border) border: border-width || border-style || border-color 属性 作用 border-width 定义边框粗细,单位是 px border-style

css 清除浮动

功能: 实现图文混排效果 原理: 绝对定位的元素脱离了文档流,而浮动元素依旧在文档流中: 清除浮动:(高度塌陷) 1. 额外标签法,<div style="clear:both;"></div>(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁.) 2. 使用after伪元素(该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素) #parent{zoom: 1} #parent:after{ conten

web前端入门到实战:css浮动的特性,与浮动带来的影响以及如何清除浮动

块元素在文档流中默认垂直排列,所以多个div从上至下依次排开 如果希望块元素在页面中水平排列,可以使用float来使元素浮动,从而脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动 css浮动的特性 1.浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围 2.元素浮动以后,会尽量向页面的左上或这是右上漂浮,直到遇到父元素的边框或者其他的浮动元素 3.如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素 4.浮动的元素永远不会超过他上边的兄弟元素,最多一边挤 5.块元素脱离