Heim > Artikel > Web-Frontend > CSS Float und verwandte Layoutmodi

CSS Float und verwandte Layoutmodi

高洛峰Original: 2016-11-01 15:40:271995Durchsuche

Float-Wert

Sehen Sie sich eine Kastanie an

Das rote Drahtmodell stellt das übergeordnete Element dar

CSS Float und verwandte Layoutmodi

Vom Dokumentenfluss getrennt, tatsächlich nicht vollständig getrennt, wird es durch die Grenze des übergeordneten Elements blockiert.

Float-Elemente befinden sich im selben Dokumentfluss

Sehen Sie sich eine Kastanie an:

Das rote Linienfeld stellt das übergeordnete Element dar

CSS Float und verwandte Layoutmodi

Nachdem die drei untergeordneten Elemente „nach links schweben“, hat das übergeordnete Element keinen Inhalt, sodass das übergeordnete Element keine Höhe hat.

Das Float-Element ist halb vom Dokumentfluss getrennt.

Bei Elementen ist es vom Dokumentfluss getrennt befindet sich im Dokumentenfluss. Die Elemente überschneiden sich, der Inhalt jedoch nicht.

CSS Float und verwandte Layoutmodi

Gib mir eine Kastanie:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>float元素半脱离文档流</title>
    <style type="text/css">
    body{
        width: 300px;padding: 5px;line-height: 1.6;
        border: 1px dashed blue;
    }
    .sample{
        height: 100px;margin-right: 5px;
        padding: 0 5px; line-height: 100px;background-color: pink;
    }
    .sb{
        outline: 1px dashed  red;

    }
    .sample{
        float: left;
    }
    </style>
</head>
<body>
<div class="sample">float : left </div>
<div class="sb">
A float is a box that is shifted to the left or right on the current line .
the most interesting characteristic of a float (o "floated" o "floating" box)
is that content may flow along its side (or be prohibited from doing so by the &#39;clear&#39;
property).
</div>
</body>
</html>

CSS Float und verwandte Layoutmodi

Gib mir noch eine Kastanie:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>float abscure</title>
    <style type="text/css">
    body{
        width: 400px;line-height: 1.6;
    }
    .sample{
        width: 100px;line-height: 100px;
        margin: 3px;text-align: center;
        background-color: pink;
    }
    .sb{
        margin: 10px auto; padding: 5px; border: 1px dashed #0f00fa;
    }
    .sample{
        float: left;
    }
    

    </style>
</head>
<body>
    <div class="sb">
            <div class="sample">float: left;</div>
        第十二届ChinaJoy 动漫游戏展7月31号在上海新国际博览中心开幕，导出是站台表演的帅哥美女。
    </div>
    

    <div class="sb">
        有些游戏商为了吸引人气，还请来了著名的演员、模特前来助阵。以下是一批漂亮的Show Girl现场照片。
    </div>
</body>
</html>

CSS Float und verwandte Layoutmodi

Normalerweise wollen wir dieses Ergebnis nicht, aber das rosa Div ist nur vom ersten Textblock umgeben. Sie müssen das Clear-Attribut

clear

Um Clear zu verstehen, müssen Sie zunächst wissen, dass div ein Element auf Blockebene ist und belegt eine eigene Zeile auf der Seite, von oben Die untere Anordnung, also der legendäre Fluss

CSS Float und verwandte Layoutmodi

①, wird auf nachfolgende Elemente angewendet, um die Auswirkungen des Schwebens auf nachfolgende Elemente zu beseitigen.

②Auf Elemente auf Blockebene anwenden

Verwendung:

Ein leeres Element hinzufügen (weniger verwendet)

clearfix, das ist eine allgemeine Lösung. Tatsächlich wird ein nicht verfügbarer Punkt verwendet, um den Float zu löschen.

Zum Beispiel:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>float abscure</title>
    <style type="text/css">
    body{
        width: 400px;line-height: 1.6;
    }
    .sample{
        width: 100px;line-height: 100px;
        margin: 3px;text-align: center;
        background-color: pink;
    }
    .sb{
        margin: 10px auto; padding: 5px; border: 1px dashed #0f00fa;
    }
    .sample{
        float: left;
    }

    .clearfix:after{
        content: &#39;.&#39;;     /* 在clearfix后面加入一个 . */
        display: block; /* 设置 . 块级元素 */
        clear: both;  /* 清除浮动效果 */

        /*隐藏那个 .  */
        height: 0;       
        overflow: hidden;
        visibility: hidden;

    }

/*    .clearfix{
    zoom: 1; 由于在IE 低版本中，不支持after属性，所以需要增加zoom属性 
    } */

    </style>
</head>
<body>
    <div class="sb clearfix">
            <div class="sample">float: left;</div>
        第十二届ChinaJoy 动漫游戏展7月31号在上海新国际博览中心开幕，导出是站台表演的帅哥美女。
    </div>
    

    <div class="sb">
        有些游戏商为了吸引人气，还请来了著名的演员、模特前来助阵。以下是一批漂亮的Show Girl现场照片。
    </div>
</body>
</html>

CSS Float und verwandte Layoutmodi

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：LayoutanzeigeNächster Artikel：Layoutanzeige

In Verbindung stehende Artikel

Mehr sehen