css怎样革除浮动-百分百源码网

css怎样革除浮动

发布时间：09/01 来源：未知浏览：关键词：

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>

更多编程相关内容，请关注百分百源码网编程入门栏目！

以上就是css怎样清除浮动的具体内容，更多请关注百分百源码网其它相关文章！

打赏