为了账号安全,请及时绑定邮箱和手机立即绑定

如何解释以下的css现象

如何解释以下的css现象

炎炎设计 2019-03-14 14:15:28
<!DOCTYPE html><html><head>    <meta charset="UTF-8"/>    <title>原理</title>    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no"/>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    <meta name="renderer" content="webkit"/>    <style>              .float {            float: left;            height: 100px;            background: rebeccapurple;        }        .box {            clear: both;            background: green;            height: 100px;            margin-top: 10px;        }    </style></head>        <body>   <div class="float">这是一段文字</div>    <div class="box">这是一段文字</div></body></html>在box元素设置 为clear:both 时 不断增大其 margin-top的值,或者减少margin-top的值box元素并不会移动当box元素没有设置clear:both 时 不断增大其 margin-top的值,或者减少margin-top的值box元素 和 float 元素会一起移动
查看完整描述

1 回答

?
九州编程

TA贡献1785条经验 获得超4个赞

主要还是外边距折叠搞的鬼,你可以先去了解一下外边距折叠。


查看完整回答
反对 回复 2019-03-26
  • 1 回答
  • 0 关注
  • 425 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信