码迷,mamicode.com
首页 > 其他好文 > 详细

clear简单的例子

时间:2019-05-22 15:57:36      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:http   das   inf   ash   简单的   结果   mamicode   head   span   

非常实用,非常简单的例子,结果都在图片里

<html>

<head>
<style>
.keepbj {

width:800px; height: 300px; border: 1px solid #f00; } #div1 { float: left; width: 200px; height: 100px; background:#06C; } #div2 { float: left; width: 200px; height: 100px; background:#0F0; } #div3 { width: 200px; height: 100px; background:#F00; clear:both; } #div4 { width: 200px; height: 100px; background:#F00; border:2px solid #6F6; } </style> </head> <body> <div class="keepbj"> <div style="height:100%; width:49%; border:1px dashed #FF0000; float:left"> <p>使用了clear</p> <div id="div1">我会在左边</div> <div id="div2">我会在右边</div> <div id="div3"> 我不会受的影响,因为我clear: both了</div> </div> <div style="height:100%; width:49%; float: right; border:1px solid #C60"> <p>没有使用</p> <div id="div1">我会在左边</div> <div id="div2">我会在右边</div> <div id="div4"> 我会受的影响,因我边瘪了</div> </div> </div> </body> </html>

 

技术图片

clear简单的例子

标签:http   das   inf   ash   简单的   结果   mamicode   head   span   

原文地址:https://www.cnblogs.com/cgldl/p/10906053.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!