从问题中找到原因：CSSfloatingclear

时间：2023-03-31 11:14:51 CSS

问题描述浮动元素导致下面的img标签居中对齐“失败”，如下图

left-div

right-div

centertext

问题是浮动元素引起的，文本、内联元素、内联块元素会环绕浮动元素排列。图中right-div的高度为51px，高于父div的50px，所以img标签的居中计算是相对于（父div的宽度）-（右边的宽度）-div)，所以它偏离了正常的水平居中位置。如果p标签放在img标签之前，就不会出现这个问题。但最好的办法是清除浮动。清除浮动方法clear:both当使用在content1和content2之间插入上面的div时，content1和content2之间会出现空隙。如果看不清楚，可以增加right-div的高度，将上面的div插入到content1的末尾。没有变化，问题没有解决。使用伪元素，结果与上述方法2一致，无法解决问题。clearfix:before,.clearfix:after{content:'';显示：表格；clear:both;}.clearfix:{zoom:1}//触发IE的haslayout.BFC(Blockformattingcontext)setcontent1styleoverflow:hidden，完美解决问题总结：总而言之，这次的问题是由于浮动和设置浮动元素父元素高度的综合效果，仅仅清除浮动元素并不能完全解决。如果不设置浮动元素的父元素高度，img也会正常垂直居中，但不会清除浮动。如果只清除浮动而不解决突出度高的问题，img无法正常垂直居中。设置溢出：隐藏只是两者兼而有之。参考文章：清除浮点数方法分析

上一篇：Vue最强教程，企业移动商城APP全站实战，全栈单人开发完成

下一篇：这个冬天，让腾讯视频为您带来温暖

从问题中找到原因：CSSfloatingclear相关文章