爱站工具包的模块,太原企业做网站,网站备案如何注销,wordpress 标签详解高度塌陷的问题#xff1a; 当开启元素的BFC以后#xff0c;元素将会有如下的特性 1 父元素的垂直外边距不会和子元素重叠 开启BFC的元素不会被浮动元素所覆盖 开启BFC的元素可以包含浮动的子元素 如何开启元素的BFC 设置元素浮动 设置元素绝对定位 …高度塌陷的问题 当开启元素的BFC以后元素将会有如下的特性 1 父元素的垂直外边距不会和子元素重叠 开启BFC的元素不会被浮动元素所覆盖 开启BFC的元素可以包含浮动的子元素 如何开启元素的BFC 设置元素浮动 设置元素绝对定位 设置元素为inline-block float:left; (不好) 虽然可以撑开父元素 会导致父元素宽度丢失了 而且使用这种方式导致下边的元素上移。 display:inlink-block; 布局好了但是宽度又没有了。但是会导致宽度丢失不推荐使用这种方式 4 将元素的overflow 设置非visible值 overflow:visible overflow:auto; 解决父元素高度塌陷 副作用最小的 hidden;兼容性 在IE6中没有BFC, 但是具有另一个隐含的属性叫hasLayout. 该属性的作用和BFC类似所在IE6浏览器通过开启hasLayout来解决问题。 方式 元素的zoom设置为1即可 zoom:1 在 IE6中如果为一个元素指定了一个宽度则会默认开启一个 hasLayout.
clear: both 清楚对他影响最大的那个元素的浮动 解决高度塌陷的方案二 可以直接在高度塌陷的父元素的最后添加一个空白的div 由于这个div并没有浮动他是可以撑开父元素高度的 然后对其进行清除浮动这样可以通过这个空白的div来撑开父元素的高度基本没有副作用 虽然可以解决问题啊但是在页面中添加多余的结构。 ********************************** 通过after伪类 设置为块级元素 清除两边浮动 解决父类塌陷的问题 通过after伪类选中box1的后边 .box1:after{ content:; display:block; //清除两侧的浮动 clear:both; } IE6不支持伪类。 zoom:1; .clearfix:after{ /*添加一个内容*/ content:; /*转换为一个块元素*/ display:block; /*清除两侧的浮动*/ clear:both; } /*在IE6中不支持after伪类 所以在IE6中还需要使用hasLayout来处理*/ .clearfix{ zoom:1; }IE6中如果上面的是内联元素 也是浮不上去的
终极版
//经过修改后的clearfix是一个多功能的//既可以解决高度塌陷又可以确保父元素和子元素的垂直外边距重叠.clearfix:before,.clearfix:after{ content:; display:table; clear:both;} 本文转载于:猿2048https://www.mk2048.com/blog/blog.php?idih1ikjtitlehtml高度塌陷问题解决
