背景：浮动元素会导致父元素高度坍塌，如果一个没有高度的块级元素的子元素浮动的话，则这个块级父元素的高度为0，即父元素高度坍塌
解决方法：
一、子级方法
在子元素的最后添加一个高度为0的子元素，并且让它清除浮动
eg：
示例代码
效果图为：
未设置高度的父元素（红）与150px高的子元素（黄）
二、父级方法
1.给父元素设置display:inline-block
display:inline-block
2.给父元素设置overflow:hidden
overflow:hidden
3.给父元素固定的高度
即计算各子元素高度后，手动给父元素固定高度，代码略
4.利用伪元素:after，并且清除浮动
利用伪元素:after
高度塌陷问题：子元素浮动父元素的高度没了，就会造成高度塌陷，可以开启bfc来解决这个问题，bfc有三种特性 1.父...
高度塌陷： 块元素默认父亲宽，高度由内容撑开父元素高度由子元素撑开浮动后塌陷 解决高度塌陷： BFC 1.父元素的...
高度塌陷 块元素默认父亲宽，高度由内容撑开父元素高度由子元素撑开浮动后塌陷解决高度塌陷：BFC 1.父元素的垂直...
高度塌陷 父元素中的子元素浮动，导致父元素塌陷 开发中避免出现 写死父元素高度可以解决，但不能随子元素变化，不推...
1、浮动具有破坏性，元素浮动后，破坏来原来的正常流布局，造成内容塌陷。 浮动的子元素会造成父元素的高度塌陷. 第一...
如果网页中某个元素内具有多个带有浮动属性的子元素，使得父元素发生塌陷，则给父元素添加高度不能解决父元素塌陷问题。 ...
解决高度塌陷 父元素在文档流中会默认被子元素撑开 如果此时给子元素添加浮动效果 子元素就会脱离文档流 从而造成父元...
父元素是由子元素抻开的，子元素设置了浮动之后，子元素就脱离文档流了，父元素无法抻开，就会形成高度塌陷解决高度塌陷B...
本来父元素是由子元素抻开的，子元素设置了浮动之后，子元素就脱离文档流了，父元素无法抻开，就会形成高度塌陷 解决高度...
本来父元素是由子元素抻开的，子元素设置了浮动之后，子元素就脱离文档流了，父元素无法抻开，就会形成高度塌陷 解决高度...
本文标题：解决子元素浮动造成父元素高度塌陷的问题的几种方法
本文链接：https://www.haomeiwen.com/subject/blcawqtx.html
网友评论