html怎么将浮动塌陷消除,关于css塌陷问题及浮动清除问题的解决

一. css塌陷问题(包括边界塌陷和高度塌陷)

1.上下相邻div边界塌陷

对于上下两个相邻的div而言，上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里较大值作为显示值。 解决办法(可能还有别的)：

①.只设置上div的margin-bottom或下div的margin-top

②.使用padding代替margin实现同样的效果

③.设置上div 或  下div样式为 display: inline-block; 但不要同时设置(否则可能会并列)。

④.设置下div浮动(尽量别用，不然可能会影响布局)

2.父级容器和子级容器的上边界塌陷

如果父级div没设置border,padding或内容，子级div的margin会一直向上找，直到找到某个标签包含border,padding或内容，然后按照此div进行margin。解决办法：

①.父级设置border，可以设置为透明(transparent)。

②.父级设置padding-top。

③.父级设置overflow:hidden属性

3.子div浮动导致父div高度塌陷

如果子元素设置了浮动(会脱离文档流)而父元素又恰好没有设置高度，此时父元素由于没有内容撑起则会出现高度塌陷问题。解决办法：

①.给父盒子设置宽高(由于宽高是写死的，可能会出现很多问题)

②.让父盒子也浮动(可能会影响布局，有点坑)

③.给父盒子添加overflow属性

overflow:auto; 有可能出现滚动条，影响美观。

overflow:hidden; 可能会带来内容不可见的问题。

④.清除浮动

二.清除浮动的5种方法

①.给父盒子设置高度(可以解决浮动对下面元素的影响)

如：解决对span元素的影响。你可以理解为父元素把浮动的子元素(病毒)圈起来进行隔离，以免对父元素以外的元素进行感染(影响)。

.content{

background: red;

height:300px;

}

.left{

float: left;

height: 200px;

width: 200px;

background: green;

}

我不受影响

②.额外标签法

1.外墙法：在与父元素并列的地方增加一个 块级 元素。并给其设置

clear:both; 样式。 缺点：content的div没有被撑起来，高度还是0，则其颜色属性无法展示出来。如下：

.content{

background: red;

}

.left{

float: left;

height: 200px;

width: 200px;

background: green;

}

我不受影响

content的背景没有显示。

2.内墙法：就是把墙移动到父盒子里 (在所有浮动标签的最后一个标签后面加上一个块级元素)。本质上, 是把父盒子撑起来让父盒子有高度。如下，此时content被撑起来了，所以content的背景为红色。

.content{

background: red;

}

.left{

float: left;

height: 200px;

width: 200px;

background: green;

}

我不受影响

③.给父盒子添加overflow:hidden 或 overflow: auto;属性，作用是撑开父盒子使其有高度。缺点：可能会出现部分内容超出隐藏。

.content{

background: red;

overflow: hidden;

}

.left{

float: left;

height: 200px;

width: 200px;

background: green;

}

我不受影响

④.使用父元素的after伪元素

.content{

background: red;

}

.left{

float: left;

height: 200px;

width: 200px;

background: green;

}

.content:after{

content: "";

display: block;

height: 0;

clear: both;

visibility: hidden;/*元素隐藏*/

}

.clearfix{

*zoom: 1;/*ie6*/

}

我不受影响

⑤.给父盒子添加clearfix类(双伪元素)清除浮动:

.content{

background: red;

}

.left{

float: left;

height: 200px;

width: 200px;

background: green;

}

.clearfix::after,

.clearfix::before{

content: "";

display: table;

}

.clearfix::after{

clear: both;

}

.clearfix{

*zoom: 1;/*ie6*/

}

我不受影响

可以不用clearfix类，直接把样式改为 .content::after…

不过在需要多次清除浮动时clearfix会更方便。

三.实验代码

清除浮动

.content{

background: red;

height: 300px;

}

.left{

float: left;

height: 200px;

width: 200px;

background: green;

}

我不受影响

可能会有错误，还请指正！

最后，求个赞吧！