HTML+CSS 清除浮动三种方式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动三种方式</title>
    <style type="text/css">
        .list0{
            width: 210px;
            border: 1px solid #000;
            list-style: none;
            margin: 50px auto 0px;
            padding: 0px;
        }
        .list0 li{
            float: left;
            width: 50px;
            height: 50px;
            margin:8px;
            border: 1px solid gold;
            background-color: cyan;
            line-height: 50px;
            text-align:center;
        }
        .list{
            width: 210px;
            /*height: 200px;*/
            border: 1px solid #000;

            margin: 50px auto 0px;
            list-style: none;
            padding: 0px;

            /*overflow: hidden;*/
            /*    这是第一种解决方法 */

        }
        .list li{
            float: left;
            width: 50px;
            height: 50px;
            background-color: plum;
            border:1px solid aqua;
            margin: 9px;
            line-height: 50px;
            text-align: center;
        }

/*        .clearfix:after{
            content: "";
            display: table;
            clear:both;
        }*/
        /*第三种解决方法*/
        
        /*与top塌陷一起写*/
        /*第一种写法*/
        /*

        .clearfix:after{
            content: "";
            clear: both;
            display: table;
        }
        .clearfix:before{
            content: "";
            display: table;
        }

        */
        /*精简写法*/
        /*.clearfix:before,after{*/
            /* 此处不能够简写元素名,每一个伪类名前面必须有所跟随的类名 */
        .clearfix:before, .clearfix:after{
            content: "";
            display: table;
        } 
        .clearfix:after{
            clear: both;
        }
        .clearfix{
            zoom:1;
        }
        /*兼容IE浏览器语句.新版Edge可不用*/

        body div strong{
            color: black;
        }
    </style>
</head>
<body>
    <div style="color: gray;">
        在父集没有设置高度的时候,子集设置浮动.则不能够撑起父集的边框,形成bug.(类似top塌陷)
    </div>
    <ul class="list0">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div style="color: gray;">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<=====这个时候需要清除浮动.<br>
        <br>
        <br>

        有三种解决方法:<br>
        1.父集添加<strong>overflow:hidden;</strong>来撑起边框.但此方法会有负面影响.<br>
        2.在子元素最后添加一个空的div块元素,并且添加行内样式为style="clear:both;"##例如:<strong>&lt;div style="clear: both;"&gt;&lt;/div&gt;</strong><br>
        3.在style式样中添加专门针对此bug的解决式样.类似于第二种方式.不过不影响子集元素,且能够重复利用.
        <strong> <br>
        .clearfix:after{ <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content: ""; <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: table; <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clear:both;}
        </strong> <br>
        并且在通常时候是与防top塌陷的bug是同时写入,在需要的时候一起用.<br>
        ===>最成熟的方法<=== <br>
        <strong>
        .clearfix:before, .clearfix:after{<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content: "";<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: table;
        } <br>
        .clearfix:after{<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clear: both;
        }<br>
        </strong>
        ===>最成熟的方法<=== <br>
    </div>
    <ul class="list clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <!-- <div style="clear: both;"></div> -->
        <!-- 这是第二种解决方法 -->
    </ul>
　　
</body>
</html>

 

 

塌陷是因为, 父元素属于文档流, 子元素浮动, 导致父元素无法捕捉子元素的高度, 导致自身高度为0.

解决思路有三:

1. 在子元素后添加一个新元素, 撑开高度.

2. overflow隐藏子元素

3. 使用clearfix(:alter或before)增加伪元素, 在不影响排版内容的情况下解决问题.

posted @ 2019-07-21 21:02  Jrri  阅读(1107)  评论(0)  编辑  收藏  举报