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>

更多编程相关内容，请关注php中文网编程入门栏目！

以上就是css如何清除浮动的详细内容，更多内容请关注技术你好其它相关文章！