郑州网站制作招聘,wordpress网站漏洞,网站右侧信息跟随左侧菜单栏变化,浙江省建设工程质监站网站什么情况下产生 (when
父盒子没有定义高度#xff0c;但是子元素有高度#xff0c;希望用子盒子撑起父盒子的高度#xff0c;但是子盒子添加了浮动属性之后#xff0c;父盒子高度为0
templatediv classfatherdiv classson但是子元素有高度希望用子盒子撑起父盒子的高度但是子盒子添加了浮动属性之后父盒子高度为0
templatediv classfatherdiv classsonrr/div/div
/templatescript setup/script
style langscss scoped.father {--left-width: 200px;border: 1px solid blue;.son {float: left;width: 60px;height: 200px;background-color: red;}}
/style
为什么高度塌陷了 (why
子盒子添加浮动属性脱离了文档流不再占据位置所以不能撑起父盒子所以父盒子高度塌陷了
怎么解决 how 法1给父盒子添加固定高度
缺点不能自适应高度灵活性不好
法2子盒子结尾添加空div并clear:both
left清除左侧浮动元素对当前元素的影响 right清除右侧浮动元素对当前元素的影响 both清除两侧中最大影响的那侧 clear: both
templatediv classfatherdiv classsonrr/div!-- 添加空的div并 clear: both--div styleclear: both/div /div
/templatescript setup/script
style langscss scoped.father {--left-width: 200px;border: 1px solid blue;.son {float: left;width: 60px;height: 200px;background-color: red;}}
/style
法3给父元素设置伪元并设置清除浮动的样式
给塌陷的父盒子添加 ::after { display: block; clear: both; content: ; }
templatediv classfatherdiv classsonrr/div/div
/templatescript setup/script
style langscss scoped.father {--left-width: 200px;border: 1px solid blue;::after {display: block;clear: both;content: ;}.son {float: left;width: 60px;height: 200px;background-color: red;}}
/style
法4添加BFC
position:absolute; position: fixed;float:left;具有overflow 且值不是 visible 的块元素例如overflow:hidden;display: flow-root;内联块 (元素具有 display: inline-block)display:flex display: inline-flex ;
