博客列表 >3. 浮动的实现原理与清除的技巧

3. 浮动的实现原理与清除的技巧

锋芒天下的博客
锋芒天下的博客原创
2019年07月08日 09:30:33579浏览

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       #box1{
           width: 200px;
           height: 200px;
           background: #000;
           float: left;
       }
       #box2{
           width: 300px;
           height: 300px;
           background: yellow;
           float: left;
       }
       #box3{
           width: 400px;
           height: 400px;
           background: green;
           float: right;
       }

       #box4{
           width: 100%;
           height: 200px;
           background: pink;
           clear: both;
       }
   </style>

</head>
<body>


<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>


</body>
</html>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议