欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css如何清除浮动

程序员文章站 2022-04-04 16:17:58
...

css如何清除浮动

1、给父级元素设置高度

效果图:

css如何清除浮动

代码:

<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 外边距属性

效果图:

css如何清除浮动

代码:

<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 清除浮动

效果图:

css如何清除浮动

代码:

<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

效果图:

css如何清除浮动

代码:

<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>

更多编程相关内容,请关注编程入门栏目!

以上就是css如何清除浮动的详细内容,更多请关注其它相关文章!

相关标签: css 浮动