lovecoding
/
web0331


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            /* height: 800px; */
            margin: 0 auto;
            /* overflow: hidden; */
            /* overflow: auto; */
            /* border: 3px solid #000; */
        }
        #part1 {
            width: 200px;
            height: 200px;
            float: left;
            background-color: #f00;
        }
        #part2 {
            width: 230px;
            height: 230px;
            float: left;
            background-color: #ff0;
        }
        #part3 {
            width: 200px;
            height: 200px;
            float: left;
            background-color: #00f;
        }
        /* 
            浮动会导致父元素高度塌陷
            清浮动：
                1.溢出隐藏法
                    在高度塌陷的父元素上 添加overflow:hidden/auto;
                2.额外标签法
                    在浮动的盒子同级添加一个空盒子
                    并给当前盒子 添加属性 clear:both/left/right/none
                3.伪元素清浮动
                            .clearfix::after {
                                content: "";
                                display: block;
                                clear: both;
                            }
                    将属性名添加到 高度塌陷的父元素中
        */
        #aa {
            clear: both;
        }
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="box" class="clearfix">
        <div id="part1"></div>
        <div id="part2"></div>
        <div id="part3"></div>
        <!-- <div id="aa"></div> -->
    </div>
</body>
</html>