鍍金池/ 問答/HTML5  HTML/ 如何解釋以下的css現(xiàn)象

如何解釋以下的css現(xiàn)象

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<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元素設(shè)置 為clear:both 時 不斷增大其 margin-top的值,或者減少margin-top的值
box元素并不會移動
當(dāng)box元素沒有設(shè)置clear:both 時 不斷增大其 margin-top的值,或者減少margin-top的值
box元素 和 float 元素會一起移動

回答
編輯回答
任她鬧

主要還是外邊距折疊搞的鬼，你可以先去了解一下外邊距折疊。

2017年12月1日 21:07