前端使用 ul > li
+ float
方式生成一个 navbar
是一种常见的页面展示手段, 但是浮动之后会导致ul
高度无法正常撑起, 所以需要清除浮动以正常撑起父元素高度. 这里介绍几种常见的浮动清除的方式.
|
|
|
|
给ul添加高度
这个是最直接的方法, 给`ul`元素添加一个高度
123
ul { height: 40px;}
给最后一个li后添加一个 空的 div
, 给div
添加clear: both
样式
123
<li></li><div style="clear:both;"></div>
给ul添加overflow: hidden; zoom: 1
样式
1234
ul { overflow: hidden; zoom: 1;}
使用 ul 伪类 进行浮动清除, 对ul
添加class="clearfix"
1234567891011
.clearfix { *zoom: 1;}.clearfix:before, .clearfix:after { display: table; line-height: 0; content: "";}.clearfix:after { clear: both;}