css如何清除浮動-css教學-PHP中文網

css如何清除浮動

王林

發布： 2020-03-04 18:07:44

轉載

2549 人瀏覽過

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>

登入後複製

更多程式設計相關內容，請追蹤php中文網

程式設計入門欄位！

以上是css如何清除浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章！