margin-top 작동하지 않음 clear : both

margin-top 작동하지 않음 clear : both

---

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

margin:top위 코드에서 '메인 데이터'가 작동하지 않는 이유는 무엇 입니까?

---

두 개의 부동 div를 "overflow : hidden"세트가있는 다른 div에 넣을 수 있습니다 .

<div style='overflow:hidden'>
  <div style="float: left;">Left</div>
  <div style="float: right;">Right</div>
</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

편집 —이 5 년 된 답변에 약간 추가하려면 : 혼란스러운 행동의 원인은 다소 복잡한 여백 붕괴 과정이라고 생각합니다 . OP의 원본 HTML을 사용하는 좋은 방법은 다음과 같은 CSS 규칙을 추가하는 것입니다.

div { border: 1px solid transparent; }

휙! 이제 (내 추가없이 <div>) 잘 작동합니다! 글쎄, 테두리에서 추가 픽셀을 제외하고. 특히 OP의 코드에서 예상치 못한 레이아웃을 발생 시키는 작동 방식과 여백 축소 규칙 의 조합 이라고 생각 합니다 clear: both.

다시 편집 — 완전한 (그리고 완전히 정확한) 스토리는 Mark Amery의 탁월한 답변을 참조하십시오 . 세부 사항에는이 답변이 설명하는 복잡성이 있습니다.

---

Pointy는 div에서 float를 래핑하는 방법을 보여 주지만, 대신 float와 기본 데이터 섹션 사이에 빈 div를 삽입 할 수 있습니다. 예를 들면 :

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both;"></div>
<div style="margin-top: 200px;">Main Data</div>

이것은 일부 HTML 주위에 div 래퍼를 추가하는 것이 바람직하지 않은 경우에 유용 할 수 있습니다.

---

사양에서 이것의 논리는 마음을 구부리고 있으며 클리어런스 및 마진 축소 에 대한 규칙의 복잡한 상호 작용을 포함합니다 .

당신은 기존의 CSS와 아마 익숙 박스 모델 하는, 컨텐츠 상자가 에 포함되어 패딩 상자 에 포함 된 경계 상자 에 포함 마진 상자 :

clear이외의 것으로 설정된 요소의 none경우이 모델에 추가 구성 요소 인 클리어런스 가 도입 될 수 있습니다 .

'none'이외의 값은 잠재적으로 정리를 도입 합니다. 여유 공간은 여백 붕괴를 방지하고 요소의 여백 상단 위의 간격 역할을합니다.

즉, 이러한 경우 상자 모델은 실제로 다음과 같이 보입니다.

그러나 정리는 언제 도입되며 얼마나 커야합니까? 첫 번째 질문부터 시작하겠습니다. 사양 은 다음과 같습니다.

'클리어'가 설정된 요소의 클리어런스 계산은 먼저 요소의 상단 테두리 가장자리의 가상 위치를 결정하여 수행됩니다. 이 위치는 요소의 'clear'속성이 'none'이면 실제 위쪽 테두리 가장자리가 있었던 위치입니다.

요소의 상단 테두리 가장자리의 가상 위치가 관련 플로트를 지나지 않으면 여유 공간이 도입되고 8.3.1의 규칙에 따라 여백이 축소됩니다.

이 논리를 질문 요청자의 코드에 적용 해 보겠습니다. 아래 코드에서 세 번째 div의 위치를 ​​설명하려고합니다 (시각화를 돕기 위해 배경이 추가됨).

<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: both; margin-top: 200px; background: blue;">Main Data</div>

사양에서 요청한대로 . 대신 세 번째 div에 clear설정되어 있다고 상상해 보겠습니다 . 그러면 위의 스 니펫은 어떤 모습일까요?noneboth

<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: none; margin-top: 200px; background: blue;">Main Data</div>

여기에서 세 번째 div는 두 개의 부동 div와 겹칩니다 . 하지만 기다려; 왜 그렇습니까? 물론 플로팅 요소가 블록 수준 요소와 겹치는 것은 허용됩니다 ( 플로트 사양에 따라 플로트 사양 에 따라 플로트가 흐름에 없기 때문에 플로트 상자 전후에 생성 된 위치가 지정되지 않은 블록 상자는 플로트가 존재하지 않는 것처럼 수직으로 흐릅니다. . " ), 그러나 우리의 세 번째 div에는 부하가 margin-top있으며 두 개의 부동 div 뒤에옵니다. 두 개의 부동 div가 본문 상단에 표시되고 세 번째 div가 200px 아래로 표시되어야하지 않습니까?

이것이 발생하지 않는 이유는 세 번째 div의 여백이 div의 부모의 여백으로 축소되기 때문입니다 (이 경우 본문-하지만 부모 div에 세 div를 모두 래핑하는 경우 동일한 동작이 발생 함). 무너지고 마진 사양 (생략 여러 관련없는 세부 사항을 아래에 인용)라고 우리에게 이야기한다 :

인접한 세로 여백 축소 ...

다음 과 같은 경우에만 두 개의 여백이 인접 합니다.

• 둘 다 동일한 블록 서식 컨텍스트에 참여하는 유동 블록 수준 상자에 속합니다.
• 라인 박스 없음, 클리어런스 없음, 패딩 없음 및 테두리 없음 ...
• 둘 다 수직으로 인접한 상자 모서리에 속합니다. 즉, 다음 쌍 중 하나를 형성합니다.
  • 상자의 위쪽 여백과 첫 번째 유입 자식의 위쪽 여백
  • ...

우리 예제의 세 번째 div는 확실히 신체의 첫 번째 자식 은 아니지만 첫 번째 유입 자식입니다. 당합니다 https://www.w3.org/TR/CSS22/visuren.html#positioning-scheme를 :

요소가 플로팅, 절대 위치 또는 루트 요소 인 경우 out of flow 가 호출 됩니다 . 요소가 out-of-flow가 아닌 ​​경우 in-flow 라고 합니다.

이 예에서 첫 번째와 두 번째 div가 플로팅되므로 세 번째 div 만 유입됩니다. 따라서 상단 여백은 부모의 상단 여백에 인접하고 여백은 축소 되어 두 개의 플로팅 요소를 포함 하여 전체 몸체를 아래로 밀어 냅니다. 따라서 세 번째 div는 큰 margin-top. 결과적으로-세 번째 요소 clear가 다음과 같이 설정된 가상의 경우 none-다음 조건을 충족합니다.

요소의 상단 테두리 가장자리가 관련 플로트를 지나지 않습니다.

그러므로:

여유 공간이 도입되고 8.3.1의 규칙에 따라 여백이 축소됩니다.

정리가 얼마나 되나요? 사양은 몇 가지 명확한 참고 사항과 함께 브라우저에 두 가지 옵션을 제공합니다.

그런 다음 클리어런스 양은 다음 중 큰 값으로 설정됩니다.

• 지워야 할 가장 낮은 플로트의 하단 외부 가장자리와도 블록의 경계 가장자리를 배치하는 데 필요한 양입니다.
• 가상 위치에 블록의 위쪽 테두리 가장자리를 배치하는 데 필요한 양입니다.

또는 클리어해야 할 가장 낮은 플로트의 하단 외부 가장자리에도 블록의 테두리 가장자리를 배치하는 데 필요한 양으로 클리어런스가 정확하게 설정됩니다.

참고 : 두 동작 모두 기존 웹 콘텐츠와의 호환성을 평가할 때까지 허용됩니다. 향후 CSS 사양에는 둘 중 하나가 필요합니다.

참고 : 클리어런스는 음수 또는 0 일 수 있습니다.

이러한 규칙을 적용하기 전에 즉시 합병증에 부딪 혔습니다. 우리가에서 고려했다는 것을 그 붕괴 마진 기억 가상의 사건 clear이었다을 none? 글쎄, 우리가 사용할 클리어런스를 계산하는 비가 설적인 경우에는 존재 하지 않습니다 . 왜냐하면 클리어런스의 존재가 그것을 방해하기 때문입니다. 앞서 인용 한 8.3.1 의 축소 여백 규칙 은 다음 과 같은 경우 에만 여백이 인접 한다는 것을 나타냅니다 .

• 라인 박스 없음, 클리어런스 없음, 패딩 없음 및 테두리 없음

(강조 추가). 따라서 세 번째 div의 상단 여백과 상위의 상단 여백은 더 이상 인접하지 않습니다. 위에 인용 된 규칙에 따라 마진 축소를 비활성화하는 본문을 유지 clear: none하지만 추가 padding-top: 1px하여 예제 스 니펫에서이 사전 정리 시나리오를 시뮬레이션 할 수 있습니다 .

body {
  padding-top: 1px;
}

<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: none; margin-top: 200px; background: blue;">Main Data</div>

이제 여백이 축소되었을 때와 달리 세 번째 div는 플로팅 된 두 형제보다 편안하게 아래에 있습니다. 그러나 우리는 마진 이 무너 지는 가상의 시나리오를 기반으로 이미 클리어런스를 추가해야한다고 결정했습니다. 남은 것은 다음을 위해 정리 금액 을 선택하는 것입니다.

지워야 할 가장 낮은 플로트의 하단 외부 가장자리와도 블록의 테두리 가장자리를 배치

그래서 우리는 세 번째 div에 음의 클리어런스 를 적용하는 것 외에는 선택의 여지가 없습니다. 위쪽 테두리 가장자리를 위로 드래그하여 그 위에 떠있는 요소 의 아래쪽 바깥 쪽 가장자리 ( 여백 가장자리 라고도 함 )에 닿도록 합니다. 따라서 플로팅 요소의 높이가 각각 10px이고 세 번째 div의 상단 여백이 200px 인 경우 -190px의 여유 공간이 적용됩니다. 마침내 질문 asker가 본 최종 결과를 얻습니다.

<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: both; margin-top: 200px; background: blue;">Main Data</div>

(브라우저의 개발 도구를 사용하여 위의 스 니펫에서 세 번째 div를 검사하는 경우 div 위의 200px 상단 여백을 볼 수 있으며 나머지 모든 콘텐츠보다 훨씬 큽니다. 전체 마진 박스는 큰 음의 클리어런스에 의해 위쪽으로 운반되었습니다.)

단순한!

---

Pointy and Randall Cook have excellent answers. I thought I'd show one more solution.

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="float: left; clear: both; margin-top: 200px;">Main Data</div>

If you make the 3rd element "float: left;" AND "clear: both;", it should have the desired effect of giving the 3rd element a 200 pixel margin. Here's a link to an example.

This also might affect other followup elements as to whether they need to be floats or not. However, it might also have the desired effect.

---

Alternative solution:

You can actually put a margin-bottom on the floated elements to push DOWN the element underneath that has clear: both.

http://jsfiddle.net/9EY4R/

Note: Having made this suggestion I have to immediately retract it as not generally a good idea, but in some limited situations may appropriate;

---

<div class='order'>

    <div class='address'>
        <strong>Your order will be shipped to:</strong><br>
        Simon</br>
        123 Main St<br>
        Anytown, CA, US
    </div>

    <div class='order-details'>
        Item 1<br>
        Item 2<br>
        Item 3<br>
        Item 4<br>
        Item 5<br>
        Item 6<br>
        Item 7<br>
        Item 8<br>
        Item 9<br>
        Item 10<br>
    </div>

    <div class='options'>
        <button>Edit</button>
        <button>Save</button>
    </div>
</div>

The panel with items is called order-details with this css

.order-details
{
    padding: .5em;
    background: lightsteelblue;

    float: left;
    margin-left: 1em;

    /* this margin does take effect */
    margin-bottom: 1em;
}

In the above fiddle - the yellow panel has a margin-top, but unless it is greater than the tallest floated item then it won't do anything (of course that's the whole point of this question).

If you set the margin-top of the yellow panel to 20em then it will be visible because the margin is calculated from the top of the outer blue box.

---

Use 'padding-top' in your main data div instead. Or, alternatively, wrap the main data div in one with 'padding-top'.

---

Try setting a bottom margin on one of the floated elements. Alternatively, you can wrap the floats in a parent element, and use a css hack to clear it without additional markup.

---

Sometimes a combination of position relative and margin can solve these type of problems.

WordPress의 alignright 및 alignleft 클래스에이 기술을 사용합니다.

예를 들어 요소를 지워서 존중되는 "하단 여백"을 원한다면 사용할 수 있습니다.

.alignright{
   float: right;
   margin-left: 20px;
   margin-top: 20px;
   position: relative;
   top: -20px;
}

예를 들어 다음과 같이 할 수 있습니다.

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-bottom: 200px; position: relative; top: 200px;">Main Data</div>

참고 URL : https://stackoverflow.com/questions/4198269/margin-top-not-working-with-clear-both