lovecoding
/
VIP26


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
							<!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: hidden; */
        }
        .one {
            width: 200px;
            height: 200px;
            border: 1px solid #f00;
            /* background: #00f; */
            float: left;
        }
        .two {
            width: 200px;
            height: 200px;
            border: 1px solid #f00;
            /* background: #f0f; */
            float: left;
        }
        .three {
            width: 200px;
            height: 200px;
            border: 1px solid #f00;
            /* background: #f0f; */
            float: left;
        }
        .four {
            width: 200px;
            height: 200px;
            float: left;
            background: #00f;
        }
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        /* .empty {
            clear: left;
        } */
        /* div {
            width: 200px;
            height: 200px;
            background: #f00;
            margin-top: 10px;
            display: inline-block;
        }
        span {
            width: 100px;
            height: 100px;
            margin-top: 10px;
            background: #00f;
            display: inline-block;
        } */
    </style>
</head>
<body>
    <!-- 
        清浮动方法
        1.溢出隐藏法
            在父级盒子上 添加overflow:hidden（隐藏）| auto（自适应）
        2.额外标签法
            在与浮动同级上添加一个空盒子，单独添加属性clear:both|none|left|right
        3.伪元素清浮动
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        添加到浮动的父级元素上
     -->
     <!-- 
        块级元素 display: block
        行内元素 display: inline
        行内块元素 display: inline-block
      -->
      <!-- 
        特殊符号
        &nbsp; 半格
        &gt; 大于号
        &lt; 小于号
        &reg; 商标
       -->
      <!-- <div></div>
      <div></div>
      <span>1</span>
      <span>2</span> -->
      &gt;
      &lt;
      &reg;
    <div class="main clearfix">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <!-- <div class="empty"></div> -->
    </div>
</body>
</html>