CSS 청산은 실제로 어떻게 작동합니까?

Question

나는있다 <div> 나는 그 자체로 줄을 서고 싶다. 에 따르면 W3Schools,이 규칙 :

div.foo {
  clear: both;
}

... 이것을 의미해야합니다 :

"왼쪽이나 오른쪽에는 부동 요소가 허용되지 않습니다."

그러나 내가 둘을 떠다면 <div> 왼쪽의 요소를 남기고 위의 규칙을 첫 번째 규칙에 적용하고 두 번째 규칙은 멍청하지 않습니다.

반면에, 내가 신청하면 "clear: left" 두 번째 <div>, 그것은 다음 줄로 내려갑니다. 이것은 나의 정상적인 접근법이지만, 왜 이렇게 해야하는지 이해하지 못합니다.

W3Schools 설명은 위에 언급되지 않았습니까, 아니면 내가 뭔가를 놓치고 있습니까? 클리어링 규칙이 적용되는 요소 만 움직일 수 있습니까?

대답

좋은 설명에 대해 Michael S와 John D에게 감사드립니다. 워렌은 지적했다 CSS2 사양, 그리고 그것이 내가이 답을 찾은 곳입니다 (강조 광산) :

이 속성은 요소 상자의 어느 쪽이 더 일찍 떠 다니는 상자.

그래서: clear 코드 앞에 나타나는 요소에 비해 적용되는 요소의 위치에만 영향을 미칩니다.

내가 말할 수 없다는 실망 <div> 다른 divs가 내려 가려면 휴식입니다. :)

Answer 1

요소에 명확하게 적용하면 해당 요소가 왼쪽이나 오른쪽에 있지 않도록 해당 요소를 움직입니다. 그것은 다른 요소들 중 어느 것도 재배치하지 않으며 단순히 요소를 주변에 아무것도없는 위치로 이동시킵니다.

편집하다

청소 된 항목 위의 항목은 이동하지 않으며 요소 아래의 항목을 이동할 수 있습니다. 또한 의견에 추가 의견을 주목하십시오

Answer 2

CSS가 "올바르게"구문 분석하고 있습니다. 두 번째 div는 여전히 왼쪽으로 떠 다니기 때문에 첫 번째 Div가 먼저 제거 된 후에도 두 번째 방이있는 방이 있으면 최상위 지점에 왼쪽에 닿습니다.

Answer 3

예, 청소하면 적용되는 요소 만 이동합니다. 그러나 요소가 "흐름 중"또는 흐름이 없는지에 따라 결과는 다르게 느껴집니다. 나는 그것이 당신을 혼란스럽게하는 것 같아요.

요소가 흐름에 있으면 청소하면 다음 모든 것과 함께 이동합니다. 그것을 움직이는 전류 펜 위치 (다음 요소를 배치 해야하는 장소)로 생각하십시오. 이 동작은 의지하기 쉽습니다.

예제의 플로트가 예제의 플로트가 움직이지 않으면 요소가 흐르지 않으면 요소 만 움직이면 다른 규칙이 움직이지 않는 한 펜 위치는 같은 위치에 유지됩니다. 예를 들어, 플로트는 이전 플로트에서 시작할 수 없습니다.

마진 붕괴의 지저분한 문제도 있습니다. 청소하면 때로는 직관적이지 않은 방식으로이를 방해합니다.

Answer 4

새 라인에서 원하는 요소에 명확하게 적용됩니다. 당신이 사용한다는 것이 명확한 것은 당신이 그것을 만지고 싶지 않은 요소에 따라 다릅니다. 이미지 B가 새 라인에 있고 이미지 A를 터치하지 않으려면 (플로트 : 왼쪽이라고 말하면) 이미지 B를 자연스럽게 생각하는대로 {clear : 왼쪽}로 표시됩니다. 이전 요소의 부유물을 지우고 있습니다.

Answer 5

나는 일반적으로 그 효과에 대해 다음을 수행합니다.

float: left;
clear: right;

그것이 적용되는 요소에만 적용되는지 모르겠습니다.

그러나 사양은 여기에서 사용할 수 있습니다. http://www.w3.org/tr/rec-css2/