css 高度塌陷_CSS高度塌陷问题解决方案

// 高度塌陷的解决方案一

.box1{border:10px red solid;

/** 根据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;overflow:hidden;

}.box2{width:100px;height:100px;background-color:blue;float:left;

}.box3{height:100px;background-color:yellow;

}

css 高度塌陷_CSS高度塌陷问题解决方案相关推荐

css 高度塌陷_css高度塌陷问题如何解决 css高度塌陷问题解决方法
本篇文章小编给大家分享一下css高度塌陷问题解决方法,文中通过示例代码详细的介绍了解决方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来一聚教程看看. 1. 高度塌陷在文档流中 ...
css 高度塌陷_css中父元素高度塌陷是什么意思，如何解决？（附代码）
本篇文章给大家带来的内容是关于css中父元素高度塌陷是什么意思,如何解决?,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 首先得回答什么是父元素高度塌陷: 在文档流中,父元素的高度默 ...
html标签高度塌陷,CSS中如何解决高度塌陷问题
CSS中如何解决高度塌陷问题发布时间:2021-06-11 18:23:40 来源:亿速云阅读:58 作者:Leah 这篇文章将为大家详细讲解有关CSS中如何解决高度塌陷问题,文章内容质量较高,因 ...
html的高度塌陷,html高度塌陷以及定位的理解
高度塌陷的含义: 父元素的高度,默认被子元素撑开,目前来讲box2多高,box1就多高.此时如果子元素设置浮动,则会导致其完全脱离文档流,子元素脱离文档流将无法撑开父元素, 导致父元素的高度丢失,就是 ...
什么是高度塌陷以及高度塌陷的解决办法
什么是高度塌陷? 当父元素高度自适应,子元素浮动后,造成父元素高度为0,称为高度塌陷. 高度塌陷怎么解决? 方法一:给父元素一个固定的高度缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,不推 ...
[css] 怎么让body高度自适应屏幕？为什么？
[css] 怎么让body高度自适应屏幕?为什么? 为何只设置body{height:100%}不行? height:100%是相对于父元素来说的,如果只设置body的高度属性,由于其父元素是html ...
css模拟select设置高度在ie67下有效（也可作为去除边框）
今天做测试页面碰到的第二个问题,IE6,IE7 下无法去除select下拉菜单的边框,新手伤不起...百度.... 以下为转载: 下面的描述都是根据这个结构来的 <div class=" ...
解决子级用css float浮动而父级div没高度不能自适应高度
当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 方法一:对父级设置固定高度此方法可用于能确定父级div内子级对象高度. 缺点: 父级是固定高度,而不随 ...
minheight能继承吗_CSS min-height最小高度max-height最大高度
DIV CSS之min-height最小高度与max-height最大高度教程篇为什么我们要使用min-height和max-height样式属性? Css min-height应用地方解释我们有 ...

css 高度塌陷_CSS高度塌陷问题解决方案

css 高度塌陷_CSS高度塌陷问题解决方案相关推荐

最新文章

热门文章