왜 오른쪽으로 떠서 순서가 뒤바뀌었어?

1638 단어
왜 오른쪽 부동 후 순서가 뒤바뀌었습니까?
때때로 이상한 현상을 발견할 수 있다. 바로 대상에 오른쪽 부동을 첨가한 후에 표시 순서와 원래의 순서가 뒤바뀌었다는 것이다. 다음은 실례를 결합하여 이런 현상이 나타난 원인을 분석한다.
인스턴스 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>    </title>
<style type="text/css">
span {
  border: 1px solid red;
}
</style>
</head>
<body>
<div> 
  <span>one</span> 
  <span>two</span> 
  <span>three</span> 
  <span>four</span> 
  <span>five</span> 
</div>
</body>
</html>

상기 코드에서 원소의 순서는 코드 순서에 따라 배열된 것이다.
인스턴스 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>    </title>
<style type="text/css">
span{
  border: 1px solid red;
  float: right;
}
</style>
</head>
<body>
<div> 
  <span>one</span> 
  <span>two</span> 
  <span>three</span> 
  <span>four</span> 
  <span>five</span> 
</div>
</body>
</html>

위의 코드에span 요소에 오른쪽 부동을 추가했는데 결과의 배열 순서는 코드 순서와 정반대이다. 이 안의 원리는 사실 매우 간단하다. 코드가 순서대로 집행되기 때문에 첫 번째span이 가장 먼저 오른쪽 부동을 하고 그 다음에 두 번째span이 오른쪽 부동을 한다. 이런 추측으로 순서가 상반된다.
원래 주소:http://www.51texiao.cn/div_cssjiaocheng/2015/0507/906.html
원래 주소는 다음과 같습니다.http://www.softwhy.com/forum.php?mod=viewthread&tid=4649

좋은 웹페이지 즐겨찾기