lovecoding
/
VIP20


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            /* 1 给父元素添加一个高度 */
            /* height:23px; */
            /* 2 overflow */
            /* overflow: hidden; */
        }
        li{
            width: 120px;
            background: #f00;
            float: left;

        }
        h2{
            height: 50px;
            background: green;
        }

        .clearfix::after{
            content:'';
            /* 块级元素 */
            display: block;
            /* 清除浮动 */
            clear:both;

        }

        #div1{
            width: 200px;
            height: 200px;
            background: #f00;
            float: left;
        }
        #div2{
            width: 200px;
            height: 200px;
            background: #0f0;
            float: left;
        }

        #div3{
            background: #00f;
        }

    </style>
</head>
<body>
    <!-- 浮动 float:left|right|none 
        浮动元素的特点： 浮动的元素会脱离文档流，空间释放
                      浮动后的元素既可以设置宽高 又可以多个占一行

        浮动导致的问题：浮动元素会脱离文档流,空间释放，-> 父元素没有高度(塌陷)->底下的元素会串上来
        解决方式：
            1  给父元素添加一个高度 
            2  给父元素添加一个overflow:hidden (overflow:hidden 本身是溢出隐藏)
            3  清除浮动 clear:left|right|both 
                在浮动的元素下边，添加一个'块级'元素，然后清除浮动
            4  3升级版本
                .clearfix::after{
                    content:'';
                    /* 块级元素 */
                    display: block;
                    /* 清除浮动 */
                    clear:both;
                }
    -->
    <ul class="clearfix">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <!-- <div style="clear:both"></div> -->
    </ul>

    <h2></h2>

    <div id="div3" class="clearfix">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>

    

    
</body>
</html>