清除浮动的方法:
-
给浮动元素的父元素设置高度:
<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
)