lovecoding
/
VIP30


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
							<!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>
        .main {
            /* overflow: auto; */
        }
         .one,.two,.three {
            width: 200px;
            height: 200px;
            /* display: inline-block; */
         }
         .one {
            float: left;
            background: #00f;
            color: #fff;
         }
         .two {
            width: 300px;
            float: left;
            background: #f00;
         }
         .three {
            float: left;
            background: #ff0;
         }
         .four {
            clear: right;
         }
         #clearfix::after {
            content: "";
            display: block;
            clear: both;
         }
    </style>
</head>
<body>
    <!-- 
        清浮动方法：
            1.溢出隐藏法：
                在浮动的父级盒子上添加overflow:hidden(隐藏)||auto(自适应)
            2.额外标签法 
                在浮动的同级创建一个空标签，并添加属性clear:both|left|right|none
            3.伪元素清浮动
                .clearfix::after {
                    content: "";
                    display: block;
                    clear: both;
                }
            将属性名添加到浮动的父级盒子上

            特殊符号
            &nbsp; 半格
            &lt; 小于号
            &gt; 大于号
            &reg; 商标
     -->
    <div class="main" id="clearfix">
        <div class="one">&reg;</div>
        <div class="two"></div>
        <div class="three"></div>
        <!-- <div class="four"></div> -->
    </div>
</body>
</html>