Css完成消除波动的方式汇总

日期：2020-12-12 类型：科技新闻我要分享

关键词：微信小程序页面设计，python小程序，小程序首页模板，如何建立微信小程序，怎么做微信小程序

网页页面合理布局中常常会用到float波动，可是波动的块级元素摆脱了规范文本文档流，使得波动元素的父元素沒有高宽比，致使父级元素沒有高宽比，因此必须消除波动对父级元素的危害，本文详细介绍消除波动的几种方式。

消除波动危害的几种方式: 给父级元素设定高宽比

实际效果图：

编码：

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

外墙法：应用1个空白块级元素上加上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>

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

总结

以上所述是网编给大伙儿详细介绍的Css完成消除波动的方式汇总,期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！

上一篇：应用CSS3完成input多选框自定款式的方式示例返回下一篇：深层次了解CSS overflow:hidden——外溢,塌陷,消除波