<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
float: left;
margin-right: 10px;
background-color: sandybrown;
list-style: none;
}
ul {
background-color: springgreen;
}
/* 4. 使用伪元素::after ::before 设置clear:both,将左右的浮动都一次性清除影响*/
.clearfix::after,
.clearfix::before {
display: block;
content: '';
visibility: hidden;
clear: both;
}
.clearfix {
/* 兼容ie6,7 */
*zoom: 1;
}
</style>
</head>
<body>
<!-- 子元素浮动,脱离标准流,导致父元素失去高度, 而引起父元素兄弟元素在标准流的布局-->
<!-- css样式不要写在行内,此处为了方便查看 -->
<div>
<!-- 1. 在子元素最后添加额外标签, 清除浮动影响, 标签增加dom开销-->
<!-- clear: both/left/right, 实际只用到clear: both-->
<ul class="box1">
<li>555</li>
<li>555</li>
<li>555</li>
<li>555</li>
<li>555</li>
<li style="clear: both;"></li>
</ul>
</div>
<br>
<div>
<!-- 2. 给父元素设置高度 -->
<ul class="box2" style="height: 30px;">
<li>555</li>
<li>555</li>
<li>555</li>
<li>555</li>
<li>555</li>
</ul>
</div>
<div>
<!-- 3. 使用overflow: hidden/scroll/auto 清除浮动, 当子元素过多,可能会使子元素被隐藏 -->
<ul class="box3" style="overflow: hidden;">
<li>555</li>
<li>555</li>
<li>555</li>
<li>555</li>
<li>555</li>
</ul>
</div>
<div>
<ul class="box4">
<li>555</li>
<li>555</li>
<li>555</li>
<li>555</li>
<li>555</li>
</ul>
</div>
<div>
<ul class="box5 clearfix">
<li>555</li>
<li>555</li>
<li>555</li>
<li>555</li>
<li>555</li>
</ul>
</div>
<div>
<ul class="box6">
<li>555</li>
<li>555</li>
<li>555</li>
<li>555</li>
<li>555</li>
</ul>
</div>
</body>
</html>
清除浮动影响4种方法
最新推荐文章于 2023-10-21 21:50:27 发布