lovecoding
/
VIP30


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546
							<!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>
         .one,.two,.three {
            width: 200px;
            height: 200px;
            /* display: inline-block; */
         }
         .one {
            float: left;
            background: #00f;
         }
         .two {
            width: 300px;
            float: left;
            background: #f00;
         }
         .three {
            float: left;
            background: #ff0;
         }
    </style>
</head>
<body>
    <!-- 
        页面的组成：
            文档流 标准流
            浮动
        为什么要使用浮动？
         因为要让内容在一行展示
         float:left/right/none
        浮动会导致元素脱离文档流 不占位
        浮动 对浮动前的元素无影响 只对浮动后的元素有影响
        缺点：会导致父元素盒子高度塌陷
     -->
    <div class="main">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>
</html>