您的位置 首页 css教程

css如何清除浮动

1、给父级元素设置高度

效果图:

973b4014dce33fead8e51336dac7b4f.png

代码:

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

效果图:

c35aa64ca4bb1ec03c0a54232acf5de.png

代码:

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

效果图:

1bcf921eab9b124fd369df2e043e2ce.png

代码:

<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

效果图:

681820e5a6b80b365c867e2b44ab1cb.png

代码:

<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如何清除浮动的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:css如何清除浮动

文章地址:https://www.pyhw.net/33860_css%e5%a6%82%e4%bd%95%e6%b8%85%e9%99%a4%e6%b5%ae%e5%8a%a8.html

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图