CSS如何去除浮动，你了解多少种方法？

发布时间：2023-08-10 14:08:01 所属栏目：语言来源：

导读：在网页布局中，我们会常常使用到float浮动，但是浮动的块级元素脱离了标准文档流会影响父级元素，因此我们需要做清楚浮动的操作，那么CSS如何清除浮动呢？下面总结了一些方法，大家可以了解看看。

清除浮动影

在网页布局中，我们会常常使用到float浮动，但是浮动的块级元素脱离了标准文档流会影响父级元素，因此我们需要做清楚浮动的操作，那么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样式 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>

    内墙法：使用一个空白块级元素上添加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>

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

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

    给浮动元素的父元素添加 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>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!