So löschen Sie Float in CSS-CSS-Tutorial-php.cn

So löschen Sie Float in CSS

王林

Freigeben： 2020-03-04 18:07:44

nach vorne

2550 Leute haben es durchsucht

So löschen Sie Float in CSS

1. Stellen Sie die Höhe des übergeordneten Elements ein

Rendering:

So löschen Sie Float in CSS

Code:

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

Nach dem Login kopieren

(Empfohlenes Tutorial: CSS-Einführungs-Tutorial)

2. Außenwandmethode: Verwenden Sie ein leeres Element auf Blockebene, um den CSS-Stil Clear to Clear Float hinzuzufügen

Hinweis: Ein Rand kann nicht zu Elementen auf Blockebene hinzugefügt werden, wenn das Attribut „Rand“ hinzugefügt wurde.

Rendering:

So löschen Sie Float in CSS

Code:

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

Nach dem Login kopieren

3. Innenwandmethode: Verwenden Sie ein leeres Element auf Blockebene, um den CSS-Stil Clear to Clear Floating hinzuzufügen

Rendering:

So löschen Sie Float in CSS

Code:

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

Nach dem Login kopieren

Die Wandmethode hat relative Vorteile gegenüber der Außenwandmethode:

Nachdem die Innenwandmethode festgelegt wurde, wird das übergeordnete Element des schwebenden Elements gestreckt, was bedeutet, dass es eine Höhe

hat

4. Fügen Sie das schwebende Element overflow:hidden

zum übergeordneten Element hinzu. Rendering:

So löschen Sie Float in CSS

Code:

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

Nach dem Login kopieren

Weitere programmbezogene Inhalte finden Sie in der Spalte „php Chinese NetEinführung in die Programmierung“!

Das obige ist der detaillierte Inhalt vonSo löschen Sie Float in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!