떠 다니는 요소가 왜 떠 다니는 요소 앞에 나오는지 (마크 업에서 뒤 따르는 경우에도)?

Question

텍스트가 마크 업에서 해당 요소 다음에 오는 경우 텍스트가 떠 다니는 요소 주위로 흐를 것이라고 생각했습니다. 그렇다면 왜 다음 예제는 표시된 결과를 생성합니까?

<div class="float block red">Red</div> 
TEXT BETWEEN RED AND BLUE 
<div class="float block blue">Blue</div> 
<div class="float block green">Green</div> 

그리고 CSS : 여기

는 HTML입니다

.float{ 
    float: left; 
} 
.block{ 
    width: 50px; 
    height: 50px; 
} 
.red{ background-color: red; } 
.blue{ background-color: blue; } 
.green{ background-color: green; } 

그리고 이것은 결과입니다

왜 순서 아닙니다 화면 상에 : 적색, 적색 및 청색 간의 텍스트, B1 ue, Green?

감사

Answer 1

"A가 플로팅 상자는 유동 꺼내어 왼쪽 또는 오른쪽으로 이동 가능한 한 정상적인 흐름 내에 배치된다. 내용이 부유물의 측면을 따라 흐를 수 있습니다. 박스가 정상 흐름에서 촬영하면 [...] 정상 흐름에서 여전히 모든 내용을 완전히 무시하고 그것을 위해 공간을하지 않습니다. "

Source

그것은 당신 때문입니다 ' 요소를 왼쪽으로 떠다. 당신은 본질적으로 그 요소들이 다른 떠 다니는 요소와 관련하여 페이지에 남아있을 것이라고 말하고 있습니다. 텍스트는 떠 다니는 것이 아니므로 가장 오른쪽에 떠있는 요소와 관련이 있습니다. 말이 돼?

원하는 결과를 얻으려면 텍스트를 DIV, SPAN 등에 넣고 왼쪽으로 띄우십시오.

Answer 2

CSS에는 블록 레벨과 인라인 요소의 두 가지 유형의 요소가 있습니다. 이러한 요소와 그 위치는 흐름이라는 개념에 의해 결정됩니다.

블록 수준 요소는 그 전후에 중단이 있으며, 인라인 요소는 중단되지 않습니다. 이것은 지나치게 단순화되었지만 CSS의 흐름을 제어하는 ​​기본 규칙입니다. position:fixed를 부여하고 속성 float주어진다 요소 인라인 요소와 텍스트는 부유 요소 감싸는 것을주의 추가로, 정상 감의 플로우로부터 제거

요소.

떠 다니는 요소를 물리적으로 바닥에서 들어 올린 상자로 상상할 수 있다면 더 이상 갈 수 없을 때까지 왼쪽이나 오른쪽으로 날아간 다음 땅에 내려 앉을 때까지 올바른 생각 (스타 크래프트의 테란 기지). 떠 다니는 요소는 텍스트에 의해 오른쪽으로 불고, 텍스트는 일단 떠 다니는 물건을 둘러 싸기 위해 스스로 재배치됩니다.

수레는 항상 다른 수레에 상대적으로 위치합니다.

예외적으로 요소에 clear이 붙어있는 경우는 예외입니다. CSS clear 속성은 기본적으로 모든 블록 수준 요소가 부동 소수점이 한쪽 또는 다른쪽에 있도록 허용하거나 그렇지 않으면 부동 된 요소를 다음 줄까지 차게합니다.실제로는 그보다 조금 더 복잡합니다. MDN article on Clear을 확인해야합니다.