css如何清除浮动

1、给父级元素设置高度

效果图：

代码：

<style>
 * {
 padding: 0;
 margin: 0;
 }
 .header {
 height: 30px;
 line-height: 30px;
 background-color: #333;
 }
 .header a {
 color: #fff;
 text-decoration: none;
 }
 ul {
 float: right;
 }
 li {
 float: left;
 list-style: none;
 padding-right: 20px;
 }
</style>
 
<div class="header">
 <ul>
 <li><a href="#">首页</a></li>
 <li><a href="#">文章</a></li>
 <li><a href="#">问答</a></li>
 <li><a href="#">帮助</a></li>
 <li><a href="#">关于</a></li>
 </ul>
</div>

（推荐教程：CSS入门教程）

2、外墙法 ：使用一个空白块级元素上添加css样式 clear 清除浮动

注意：添加了clear样式的块级元素添加不了 margin 外边距属性

效果图：

代码：

<style>
 * {
 padding: 0;
 margin: 0;
 }
 .header {
 /* background-color: #333; */
 }
 .header a {
 /* color: #fff; */
 text-decoration: none;
 }
 ul {
 float: right;
 }
 li {
 float: left;
 list-style: none;
 padding: 5px 20px;
 }
 
 .clearfix {
 height: 10px;
 background-color: red;
 clear: both;
 }
 
 .main {
 color: #fff;
 height: 100px;
 background-color: blue;
 }
</style>
 
<div class="header">
 <ul>
 <li><a href="#">首页</a></li>
 <li><a href="#">文章</a></li>
 <li><a href="#">问答</a></li>
 <li><a href="#">帮助</a></li>
 <li><a href="#">关于</a></li>
 </ul>
 
</div>
 
<div class="clearfix"></div>
 
<div class="main">主要内容</div>

3、内墙法 ：使用一个空白块级元素上添加css样式 clear 清除浮动

效果图：

代码：

<style>
 * {
 padding: 0;
 margin: 0;
 }
 .header {
 background-color: #333;
 }
 .header a {
 color: #fff;
 text-decoration: none;
 }
 ul {
 float: right;
 }
 li {
 float: left;
 list-style: none;
 padding: 5px 20px;
 }
 .clearfix {
 clear: both;
 }
</style>
 
<div class="header">
 <ul>
 <li><a href="#">首页</a></li>
 <li><a href="#">文章</a></li>
 <li><a href="#">问答</a></li>
 <li><a href="#">帮助</a></li>
 <li><a href="#">关于</a></li>
 </ul>
 <div class="clearfix"></div>
</div>

内墙法 相对于 外墙法 有相对优点：

内墙法 设置后，浮动元素的父级元素会被撑开，也就是说有了高度

4、给浮动元素的父元素添加 overflow:hidden

效果图：

代码：

<style>
 * {
 padding: 0;
 margin: 0;
 }
 .header {
 background-color: #333;
 overflow: hidden;
 }
 .header a {
 color: #fff;
 text-decoration: none;
 }
 ul {
 float: right;
 }
 li {
 float: left;
 list-style: none;
 padding: 5px 20px;
 }
 
 .main {
 color: #fff;
 height: 100px;
 background-color: blue;
 }
</style>
 
<div class="header">
 <ul>
 <li><a href="#">首页</a></li>
 <li><a href="#">文章</a></li>
 <li><a href="#">问答</a></li>
 <li><a href="#">帮助</a></li>
 <li><a href="#">关于</a></li>
 </ul>
</div>
 
<div class="main">主要内容</div>

更多编程相关内容，请关注Gxlcms编程入门栏目！