float none과 float left 요소의 음수 여백에 대한 혼동

Question

CSS가 C++보다 훨씬 어렵고 혼란 스럽기 때문에 몇 가지 질문이 있습니다.

은 HTML 본문

<div id="mydiv1">12345~~~~~~~~/</div><div id="mydiv2">+_______67890</div> 

그리고 CSS 다음 고려

이있는 나에게 의미가 있습니다 (내 최신 크롬에서) 다음과 같습니다

#mydiv1 { 
    float: left; 
    background-color: red; 
    margin-right: -30px; 
} 

#mydiv2 { 
    float: left; 
    background-color: blue; 
} 

초 때문에 div가 떠 다니고 첫 번째 div 위에 놓입니다.

반면에 mydiv2에서 float 속성을 제거하면 내용 만 이동하지만 배경 상자는 같은 위치에 유지됩니다.

1) 당신은 이유를 설명시겠습니까?

는 지금은 마진을 제거하고 떠, 두 div의이

#mydiv1 { 
    background-color: red; 
    width: 220px; 
} 

#mydiv2 { 
    background-color: blue; 
    width: 240px; 
} 

I가 float: left를 추가하면 그것은 기대에이

같이 그러나 것 CSS을 가진 만들기 위해 폭을 추가 할 것 #mydiv1 갑자기 다음과 같이 보입니다.

2) 두 번째 div가 왜 두 배나 높이가 된 이유는 무엇입니까? 첫 번째 div의 z-index을 -1로 설정하여 검사했습니다.

추신. 필자는 CodeAcademy에 대한 자습서를 작성하고 smashingmagazine.com에서 float/margin 관련 기사를 읽었습니다. 슬프게도 모든 것이 맑아지는 것은 아닙니다. 너희들이 나에게이 질문들을 설명했을 온라인 자원이나 책을 제안 할 수 있다면 나는 그것을 많이 고맙게 생각할 것이다.

Answer 1

<div>는 블록 레벨 소자이다. 그것은 이웃 소자가 그 아래/위 이동 아니라 옆 만든다.당신이 블록 레벨 요소에 float를 적용 할 때

지금, 더 이상 컨테이너의 폭을 채우고, 그 width는 내용의을 수 없습니다. 또한 이웃 사람들이 그 위/아래로 가도록 강요하는 능력을 잃어 버립니다.

주 : 까다로운 비트는 가 요소 콘텐츠의 정기적 인 흐름을 더 이상 일부가 없습니다 떠 있기 때문에 유지 컨테이너가 가 적절한 height이 없습니다 요소를 떠 있다는 것입니다. 는 예를 들어 요소를 떴다 경우, 귀하의 질문의 마지막 부분에 대해서

: (http://www.quirksmode.org/css/clearing.html 여기 극복하는 방법). #mydiv1은 블록 수준 옆에 있습니다 (예 : # mydiv2이면 block-level 요소가 플로팅 요소 주위를 둘러 쌉니다. 그것은 사람들이 뉴스 기사에서 이미지를 감쌀 수있는 방법 중 하나입니다.

Answer 2

div2에서 float을 제거하면 떠 다니는 요소가 내용에서 높이를 차지하지 않으므로 div1 뒤에 떠납니다. 요소의 수직 흐름에서 벗어날 것이라고 말할 수 있습니다. 그러나 여전히 콘텐츠에서 수평 적 공간을 차지합니다. 따라서 결과가 예상대로됩니다. 일단 규칙을 알면. 다른 예제에서 이중 높이를 설명해야합니다.

는 여기에 내가 희망이 도움이 css-tricks.com

에서 좋은 기사입니다! 자연적으로는, 용기의 폭을 채우도록

Answer 3

div와 같은 블록 레벨 요소에 float 또는 width를 지정하지 않으면 컨테이너의 전체 너비를 차지합니다.

float 대신 너비를 지정하고 표시 할 수 있습니다. 인라인 블록. 이 표시 속성은 내용을 인라인으로 표시하고 블록 수준 요소처럼 동작합니다.