Detaillierte grafische Erklärung von CSS Basic Clear Float-CSS-Tutorial-php.cn

Detaillierte grafische Erklärung von CSS Basic Clear Float

Float löschen

Problem mit der Boxhöhe

Im Standardfluss kann die Höhe des Inhalts die Höhe der Box unterstützen

Detaillierte grafische Erklärung von CSS Basic Clear Float

<style>

        div{
            background-color: red;
        }

        p{
            width: 200px;
            height: 100px;
            background-color: blue;
        }

</style>

<div>
    <p></p>
</div>

Nach dem Login kopieren

Die Höhe des schwebenden Elementinhalts im schwebenden Fluss kann die Höhe der Box nicht unterstützen

Detaillierte grafische Erklärung von CSS Basic Clear Float

<style>
        div{
            background-color: red;
        }
        p{
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
</style>
<div>
    <p></p>
</div>

Nach dem Login kopieren

Floating-Methode 1 löschen

Höhe zum vorherigen übergeordneten Feld hinzufügen

Beispielcode:

<style>
 {
     margin: 0;
     padding: 0;
 }
 .box1{
     background-color: red;
     /这里*/
     height: 50px;
 }
 .box2{
     background-color: purple;
 }
 ul{
     list-style: none;
 }
 .ul01 li{
     background-color: blue;
 }
 .ul02 li{
     background-color: green;
 }
 ul li{
     float: left;
 }
</style>
<div class="box1">
   <ul class="ul01">
大娃

二娃

三娃

   </ul>

</div>

<div class="box2">

   <ul class="ul02">

李南江

极客江南

江哥

   </ul>

</div>

Nach dem Login kopieren

- Vor dem Hinzufügen von Höhe: - ![](http://upload -images.jianshu.io /upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- Nach dem Hinzufügen der Höhe - ![](http:// upload-images.jianshu. io/upload_images/647982-fcb8f6fa15c6be76.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- Hinweise: - Schreiben Sie in der Unternehmensentwicklung nicht das Höhe, wenn Sie können. Diese Methode wird also „nicht häufig verwendet“ ###Floating-Methode 2 löschen – Verwenden Sie das Attribut „clear:both;“, um die Auswirkungen der vorherigen Floating-Elemente auf mich zu löschen

- Beispielcode: html

<style>
{
           margin: 0;
           padding: 0;
       }
       .box1{
           background-color: red;
       }
       .box2{
           background-color: purple;
           /这里/
           clear: both;
           /margin无效/
           margin-top: 30px;
       }
       ul{
           list-style: none;
       }
       .ul01 li{
           background-color: blue;
       }
       .ul02 li{
           background-color: green;
       }
       ul li{
           float: left;
       }
</style>
<div class="box1">
   <ul class="ul01">
大娃
二娃
三娃
   </ul>
</div>
<div class="box2">
   <ul class="ul02">
李南江
极客江南
江哥
   </ul>
</div>

Nach dem Login kopieren

- Clear hinzufügen: Both; before: - ![](http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip %7CimageView2/2/w/1240) – Nach dem Hinzufügen von clear: Both; /2/w/1240) – Hinweise: – Nach der Verwendung von „clear:both“ ist das Randattribut ungültig und wird daher nicht häufig verwendet. ###Floating-Methode löschen – Fügen Sie ein zusätzliches Element auf Blockebene zwischen zwei Feldern hinzu schwebende Unterelemente

- Beispielcode: html

<style> 
       {
           margin: 0;
           padding: 0;
       }
       .box1{
           background-color: red;
       }
       .box2{
           background-color: purple;
       }
       ul{
           list-style: none;
       }
       .ul01 li{
           background-color: blue;
       }
       .ul02 li{
           background-color: green;
       }
       ul li{
           float: left;
       }
       /这里/
       .wall{
           clear: both;
       }
       .h20{
           /利用额外块级元素实现margin/
           height: 20px;
           background-color: deepskyblue;
       }
</style>
<div class="box1">
   <ul class="ul01">
大娃
二娃
三娃
   </ul>
</div>
<!--这里-->
<div class="wall h20"></div>
<div class="box2">
   <ul class="ul02">
李南江
极客江南
江哥
   </ul>
</div>

Nach dem Login kopieren

- vor dem Hinzufügen zusätzlicher Elemente auf Blockebene - ![](http://upload-images.jianshu. io/upload_images/647982-37c3591032b43be9.png?imageMogr2/ auto-orient/strip%7CimageView2/2/w/1240)

- Nach dem Hinzufügen zusätzlicher Elemente auf Blockebene - ![](http://upload -images.jianshu.io/upload_images/647982-15566323325c738d (png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) – Hinweise – Bei der Außenwandmethode kann der Randeffekt durch Einstellen der Höhe erreicht werden von zusätzlichen Labels – Sohu nutzt diese Technologie ausgiebig, aber aufgrund der Notwendigkeit, viele bedeutungslose Tags hinzuzufügen, daher „nicht häufig verwendet“ ###Floating-Methode vier löschen – ein zusätzliches Element auf Blockebene hinzufügen

am Ende des vorherigen Felds - Beispielcode-HTML

<style>
{
           margin: 0;
           padding: 0;
       }
       .box1{
           background-color: red;
       }
       .box2{
           background-color: purple;
           /margin有效/
           margin-top: 20px;
       }
       ul{
           list-style: none;
       }
       .ul01 li{
           background-color: blue;
       }
       .ul02 li{
           background-color: green;
       }
       ul li{
           float: left;
       }
       /这里*/
       .wall{
           clear: both;
       }
</style>
<div class="box1">
   <ul class="ul01">
大娃
二娃
三娃
   </ul>
   <!--这里-->
   <div class="wall"></div>
</div>


<div class="box2">
   <ul class="ul02">
李南江
极客江南
江哥
   </ul>
</div>- 添加额外块级元素前
    -  ![](http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 添加额外块级元素后
    - ![](http://upload-images.jianshu.io/upload_images/647982-7799130801c08c6b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Nach dem Login kopieren

- Hinweise:
- Die Innenwandmethode unterstützt automatisch die Höhe des Felds, sodass Sie den Rand direkt festlegen können Attribut
– Wie bei der Innenwandmethode müssen Sie viele bedeutungslose leere Tags hinzufügen, was die Struktur verletzt. Die Trennung von der Leistung wird in der späteren Wartung ein Albtraum sein

###Clear Floating-Methode fünf
- Was ist overflow:hidden?
- Die Funktion von overflow:hidden besteht darin, die Außenseite des Inhalts der Überlaufbox zu löschen

- Beispielcode

```html
.test{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
            overflow: hidden;
}

<div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

Nach dem Login kopieren

Vor dem Hinzufügen von overflow:hidden

Detaillierte grafische Erklärung von CSS Basic Clear Float

Nach dem Hinzufügen von overflow:hidden

Detaillierte grafische Erklärung von CSS Basic Clear Float

So verwenden Sie overflow:hidden zum Löschen floats

Overflow:hidden-Attribut zum vorherigen Feld hinzufügen

Beispielcode

```html
<style>
     {
         margin: 0;
         padding: 0;
     }
     .box1{
         background-color: red;
         /这里/
         overflow: hidden;          zoom:1;
     }
     .box2{
         background-color: purple;
         /margin有效/
         margin-top: 20px;
     }
     ul{
         list-style: none;
     }
     .ul01 li{
         background-color: blue;
     }
     .ul02 li{
         background-color: green;
     }
     ul li{
         float: left;
     }
</style>
<div class="box1">
   <ul class="ul01">
大娃
二娃
三娃
   </ul>
</div>
<div class="box2">
   <ul class="ul02">
李南江
极客江南
江哥
   </ul>
</div>- 添加overflow:hidden;前
    - ![](http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


- 添加overflow:hidden;后
    - ![](http://upload-images.jianshu.io/upload_images/647982-7799130801c08c6b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Nach dem Login kopieren

- 注意点:
- 由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
- IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;
- 实际上*zoom:1能够触发IE8之前IE浏览器的hasLayout机制
- 优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突

- *zoom:1;和_zoom:1的区别
- 这个是hack写法，用来识别不同版本的IE浏览器
- _后面的属性只有IE6能识别
- *后面的属性 IE6 IE7能识别

###清除浮动方式六
- 给前面的盒子添加伪元素来清除浮动

- 示例代码

```html

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }

        /*这里*/
        .clearfix:after {
            /*生成内容作为最后一个元素*/
            content: "";
            /*使生成的元素以块级元素显示,占满剩余空间*/
            display: block;
            /*避免生成内容破坏原有布局的高度*/
            height: 0;
            /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
            visibility: hidden;
            /*重点是这一句*/
            clear: both;
        }
        .clearfix {
            /*用于兼容IE, 触发IE hasLayout*/
            *zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

Nach dem Login kopieren

添加伪元素前

Detaillierte grafische Erklärung von CSS Basic Clear Float

添加伪元素后

Detaillierte grafische Erklärung von CSS Basic Clear Float

注意点:

本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素

添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性

CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西

清除浮动方式七

给前面的盒子添加双伪元素来清除浮动

示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }

        /*这里*/
        .cf:before,.cf:after {
            content:"";
            display:table;
            /*重点是这一句*/
            clear:both;
        }
        .cf {
            zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

Nach dem Login kopieren

添加双伪元素前

Detaillierte grafische Erklärung von CSS Basic Clear Float

添加双伪元素后

Detaillierte grafische Erklärung von CSS Basic Clear Float

注意点:

添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性

先知道有这些方式, 原理需要学习到BFC和hasLayout才能明白

支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；

不支持 BFC的浏览器（IE5-7），通过触发 hasLayout 闭合浮动。

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erklärung von CSS Basic Clear Float. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!