HTML外边框塌陷什么意思,html如何解决高度塌陷问题

本章给大家介绍html如何解决高度塌陷问题。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

高度塌陷的问题：

当开启元素的BFC以后，元素将会有如下的特性：

1 父元素的垂直外边距不会和子元素重叠

开启BFC的元素不会被浮动元素所覆盖

开启BFC的元素可以包含浮动的子元素

那么如何开启元素的BFC？

设置元素浮动

设置元素绝对定位

设置元素为inline-block

float:left; (不好) 虽然可以撑开父元素会导致父元素宽度丢失了；而且使用这种方式导致下边的元素上移。

display:inlink-block; 布局好了，但是宽度又没有了。但是会导致宽度丢失，不推荐使用这种方式。

元素的overflow 设置非visible值：

overflow:auto; 解决父元素高度塌陷副作用最小的。

兼容性

在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;

}

HTML外边框塌陷什么意思,html如何解决高度塌陷问题相关推荐

在html中通过使用css解决高度塌陷问题
目录 1. 我们先写两个盒子用来演示 2.接下来我们开始演示解决方法: 1.给父元素添加一个固定的高度 2.给父元素添加一个overflow: hidden; 3.在父元素里最后添加一个空的块元素 ...
深度理解 BFC，解决高度塌陷问题
相信大家在各类前端学习教程或者视频中都会看到这样一段代码 .clearfix::after {content :'';display: block;clear: both; } 我们也知道教程会说给要 ...
解决高度塌陷的几种方法
引入进行页面布局时,为了能够达到自适应,通常高度是不会进行固定设置的,而使用float进行元素的浮动后,由于没有内容的高度,所以会发生父元素的高度塌陷问题,为了解决此类问题这里给出了几种解决方法. ...
如何解决高度塌陷【超全面】
高度塌陷是什么? 父元素的高度一般是被子元素或者内容撑开,若设置子元素浮动,则子元素就会脱离文档流,也就撑不开父元素的高度了.从而导致父元素的高度丢失,页面布局混乱如何解决高度塌陷? 解决高度塌陷的 ...
html标签高度塌陷,CSS中如何解决高度塌陷问题
CSS中如何解决高度塌陷问题发布时间:2021-06-11 18:23:40 来源:亿速云阅读:58 作者:Leah 这篇文章将为大家详细讲解有关CSS中如何解决高度塌陷问题,文章内容质量较高,因 ...
html 表格点击塌陷,HTML解决高度塌陷
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. 由于 ...
高度塌陷问题和解决高度塌陷问题
目录什么是高度塌陷解决高度塌陷问题什么是高度塌陷在文档流中,父元素的高度默认是由子元素撑开的,等于说子元素多高,父元素就多高,但是当为子元素设置了浮动之后,子元素会脱离文档流,此时,将会导致子 ...
解决高度塌陷：万能清除法
逆战班高度塌陷:当父元素不设置高度时,其他高度会随着里面的子元素的高度的变化而变化,即父元素的高度由子元素的高度撑开,达到高度自适应的目的.而当父元素的**第一级子元素都设置了浮动**时,父元素不 ...
解决高度塌陷问题（非BFC解决方式）
高度塌陷: 1.在文档流中,如果没有设置宽度,则父元素的宽度为auto,父元素高度由内容撑开. 2.如果父元素塌陷,则父元素下的兄弟元素会上移,导致页面布局混乱. 3.当子元素设置浮动,则子元素脱离文 ...

HTML外边框塌陷什么意思,html如何解决高度塌陷问题

HTML外边框塌陷什么意思,html如何解决高度塌陷问题相关推荐

最新文章

热门文章