清除浮动的方法:
-
给浮动元素的父元素设置高度:
<div class="container"> <div class="float"></div> </div>.container { height: 200px; /* 设置明确高度 */ } .float { float: left; } -
给最后一个浮动元素后添加额外标签来清理浮动。 ( 建议不要为了清除浮动专门添加元素,会产生冗余元素)
<div class="container"> <div class="float"></div> <div class="clear"></div> </div>.float { float: left; } .clear { clear: both; } -
后伪元素清除浮动(推荐)。
<div class="container"> <div class="float"></div> </div>.container::after { content: ''; display: block; clear: both; }通过后伪元素清除浮动,不会产生冗余DOM。
-
创建父级
BFC(给父级元素定义overflow: hidden)
本文详细介绍了清除CSS中浮动元素的几种有效方法,包括给父元素设置高度、使用额外标签和伪元素,以及创建块级格式化上下文(BFC)等,帮助开发者解决布局难题。
576

被折叠的 条评论
为什么被折叠?



