一、float塌陷

1、问题

2、代码示例

3、解决方法

1、每个盒子设定固定的width和height

2、给外部的父盒子也添加浮动

3、给父盒子添加overflow属性。

4、父盒子里最下方引入清除浮动块。

5、用after伪元素清除浮动(推荐使用)

6、给父盒子设置padding-top(不推荐)

二、margin塌陷

1. 同级元素塌陷

2、父子元素塌陷

一、float塌陷

1、问题

当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零，我们称这是CSS高度塌陷。

2、代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.d1{background-color: chartreuse;width: 700px;height: auto;}.d2{background-color: darkmagenta;width: 300px;height: 200px;}</style>
</head>
<body><div class="d1">父盒子<div class="d2">子盒子</div></div>
</body>
</html>

      .d2{background-color: darkmagenta;width: 300px;height: 200px;float: left;}

我们可以清楚的看到给子盒子浮动后，子盒子脱离文档流，被子盒子高度撑起的父盒子高度塌陷。

3、解决方法

1、每个盒子设定固定的width和height

这是最简单直接的方式。

优点：简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面。
缺点：非自适应，浏览器的窗口大小直接影响用户体验。

2、给外部的父盒子也添加浮动

优点：简单方便
缺点：对页面的布局不是很友好，不易维护。

3、给父盒子添加overflow属性。

overflow:auto; 有可能出现滚动条，影响美观。
overflow:hidden; 可能会带来内容不可见的问题。

4、父盒子里最下方引入清除浮动块。

   <div class="d1">父盒子<div class="d2">子盒子</div><br style="clear: both;">  <!--清除浮动块--></div>

缺点：引入了不必要的冗余元素。

5、用after伪元素清除浮动(推荐使用)

   .content:after{content: "";  <!--content指你写的父元素-->display: block; height: 0;clear: both;visibility: hidden;}

优点：这也是bootstrap框架采用的清除浮动的方法。这是一种纯CSS的解决浮动造成盒子塌陷方法，没有引入任何冗余元素。
缺点：低版本IE不兼容。

6、给父盒子设置padding-top(不推荐)

二、margin塌陷

margin塌陷指的是嵌套父子块级元素垂直方向（次方向）的margin会结合到一起，并取最大的值，子元素的margin会往父元素顶部上方方向塌陷。

1. 同级元素塌陷

上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正盒子间距离是较大的那个值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.d1{background-color: sandybrown;width: 300px;height: 200px;border: 1px solid royalblue;margin-bottom: 200px;}.d2{background-color: seagreen;width: 300px;height: 200px;border: 1px solid royalblue;margin-top: 100px;}</style>
</head>
<body><div class="d1">盒子1</div><div class="d2">盒子2</div>
</body>
</html>

盒子1与盒子2垂直间距为200px！并不是两盒子上下外边距之和。这就是边距小的塌陷到了边距值大的值内部。

解决办法：

同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。

2、父子元素塌陷

父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。
本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级元素一起掉下来（父元素的上边距0塌陷到了子元素的上边距50里面）。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.d1{background-color: royalblue;width: 500px;height: 400px;margin-top: 300px;}.d2{background-color:red;width: 300px;height: 200px;margin-top: 60px;}</style>
</head>
<body><div class="d1"><div class="d2">子盒子</div></div>
</body>
</html>

注：给d1和d2都给了margin-top,显示只按照较大值把d1和d2同时下拉较大值的距离。

解决办法：

可以为父元素定义1px的上边框或上内边距。border和padding毕竟会撑大盒子，处理不好也会出问题。
可以为父元素添加overflow:hidden。

CSS高度塌陷问题（float塌陷margin塌陷）相关推荐

【CSS】1035- 再看 margin 塌陷和合并问题
前言小问题总是被人视而不见,等遇到的时候又突然想不起来,所以我们需要经常总结,这可以帮助我们更好的记忆东西.今天我们来总结两个不起眼的小问题:margin塌陷和margin合并 margin塌陷什 ...
css 高度塌陷_web前端入门到实战：CSS 负边距的行为表现
CSS 中的负边距 margin 是可以设置为负值的,这会帮你实现靠近顶部/左边相邻元素的效果,或者实现靠近底部/右边相邻元素的效果. 先介绍下我们的测试元素:一个简单的包含三个段落的容器元素.注意, ...
css 高度塌陷_css高度塌陷问题如何解决 css高度塌陷问题解决方法
本篇文章小编给大家分享一下css高度塌陷问题解决方法,文中通过示例代码详细的介绍了解决方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来一聚教程看看. 1. 高度塌陷在文档流中 ...
前端学习（77）：css中常见margin塌陷问题之解决办法
塌陷问题当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列首先设置两个DIV,并为其制定宽高 1 1 /*HTML部分*/2 <body>3 <d ...
【HTML/CSS】margin塌陷和合并问题
1 margin塌陷问题 1.1 示例 <!DOCTYPE html> <html lang="en"> <head><meta char ...
解决margin塌陷的问题_解决margin塌陷与margin合并（margin）清除浮动问题
**1.margin塌陷** 问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生 ...
盒子塌陷和 margin塌陷
1,盒子塌陷产生的原因:当父元素没设置足够大小的时候,而子元素设置了浮动的属性,子元素就会跳出父元素的边界(脱离文档流),尤其是当父元素的高度为auto时,而父元素中又没有其它非浮动的可见元素时,父 ...
margin塌陷问题
magin塌陷现象:在垂直方向,父子关系两个盒子中margin大的覆盖margin小的,导致两个盒子有同一个margin. <style> .div1{ width: 100px; hei ...
margin塌陷与margin合并、浮动流
一.margin 塌陷父子嵌套元素,垂直方向的margin,父子会粘合在一起,取最大的值.子级不能根据父级定位,好像父级没有棚. 解决方案,触发bfc(block format context),使 ...

CSS高度塌陷问题（float塌陷margin塌陷）

一、float塌陷

1、问题

2、代码示例

3、解决方法

1、每个盒子设定固定的width和height

2、给外部的父盒子也添加浮动

3、给父盒子添加overflow属性。

4、父盒子里最下方引入清除浮动块。

5、用after伪元素清除浮动(推荐使用)

6、给父盒子设置padding-top(不推荐)

二、margin塌陷

1. 同级元素塌陷

2、父子元素塌陷

CSS高度塌陷问题（float塌陷margin塌陷）相关推荐

最新文章

热门文章