问题描述：

在调试代码，修改一个div的样式时，发现其高度为0，但是该div却包括了多个有高度的子元素，仔细想了一下，应该就是遇到了css中所说的高度坍塌问题了；

问题分析：

float: left；元素靠左边浮动

float: right；元素靠右边浮动

float: none；元素不浮动

css中出现高度坍塌的原因：子级元素设置了浮动，脱离了文档流；而父级元素未设置浮动属性、未设置高度、高度设置为自适应；从而导致父级元素高度为0，出现高度坍塌；

<div class="father"><div class="child1"></div><div class="child2"></div>
</div><style>.father {background-color: bisque;}.child1 {width: 100px;height: 200px;background-color: cadetblue;float: left; }.child2 {width: 100px;height: 200px;background-color: darkgreen;float: left;}
</style>

问题解决：

方法一：给父级元素设置伪元素样式 ::after

这是比较常用的清除浮动方法

<style>.father {background-color: bisque;}.father::after {content:'';width:100%;height:0;display:block;overflow:hidden;clear:both;visibility:hidden}
</style>

方法二：在子元素最后添加div元素，设置clear: both属性

这种清除浮动的方法会增加代码冗余

<style>.clear {clear: both;}
</style><div class="father"><div class="child1"></div><div class="child2"></div><div class="clear"></div>
</div>

方法三：给父元素设置overflow: hidden属性

overflow: hidden 属性会触发BFC块级格式化上下文规则，浮动元素也参与高度的计算；该方法不仅能解决高度坍塌的问题，而且父元素高度自适应；缺点是子元素超出父元素部分会被隐藏；

<style>.father {background-color: bisque;overflow: hidden;}
</style>

方法四：给父元素设置固定高度，但是不推荐该方法

因为给父元素设置固定高度后，父元素的高度无法自适应

<style>.father {background-color: bisque;height: 100px;}
</style>

css中的容器坍塌问题相关推荐

css圆在中心根据宽度缩放_根据CSS中的容器宽度重新缩放字体
css圆在中心根据宽度缩放 Introduction: 介绍: Dealing with fonts is a very interesting thing to do as fonts bring ...
css中改变边距会影响原大小,CSS：更改父容器中子项的边距会改变子项的宽度吗？...
我正在尝试理解CSS中的填充,边距和负边距,我创建了以下代码以增加我的理解 . 我尝试在我的"行"类中添加一个边距,根据我对CSS中边距的基本知识,我预计会发生以下情况: 正向边距 ...
css margin属性 auto,css中margin:auto属性的使用方法
css中margin:auto属性的使用方法发布时间:2020-06-25 10:53:17 来源:亿速云阅读:221 作者:Leah 今天就跟大家聊聊有关css中margin:auto属性的使用 ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
[转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
html语言div什么意思,css中div是什么意思？
css中div是什么意思? div是html中的一个标签,通常作为容纳其他元素的容器.在css中,表示一种选择器,可以直接使用div(标签选择器)来查找HTML元素设置样式:而如果是.div那么表示某 ...
div+css中命名规范
上次给别人演示div的效果时,写了css样式却一直不能呈现,最后不小心发现自己在写css样式时候,给一个class命名为数字开头的名称,才想起来自己去年刚学习样式表时候也出现此问题,最后被我解决掉的, ...
CSS中块级格式化上下文（BFC）的特性与应用
一.何为BFC 块级格式化上下文(Block Formatting Context)是网页CSS视觉渲染的一部分,并用于决定盒子的布局.在定位体系中属于常规流(Normal Flow)(另外两种定位体 ...
CSS中Float概念相关文章
float 是 css 的定位属性. 在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的float属性的页面元素就像在印刷布 ...
CSS中的EM属性-弹性布局
使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目 ...

css中的容器坍塌问题

问题描述：

问题分析：

问题解决：

方法一：给父级元素设置伪元素样式 ::after

方法二：在子元素最后添加div元素，设置clear: both属性

方法三：给父元素设置overflow: hidden属性

方法四：给父元素设置固定高度，但是不推荐该方法

css中的容器坍塌问题相关推荐

最新文章

热门文章

css中的容器坍塌问题

问题描述：

问题分析：

问题解决：

方法一：给父级元素设置伪元素样式 ::after

方法二： 在子元素最后添加div元素，设置clear: both属性

方法三： 给父元素设置overflow: hidden属性

方法四： 给父元素设置固定高度，但是不推荐该方法

css中的容器坍塌问题相关推荐

最新文章

热门文章

方法二：在子元素最后添加div元素，设置clear: both属性

方法三：给父元素设置overflow: hidden属性

方法四：给父元素设置固定高度，但是不推荐该方法