CSS : float : 왼쪽 여백 - 오른쪽 모든 요소를 ​​멀리하지 않습니다.

Question

내 모든 콘텐츠를 이미지 주위에 흐르게하고 싶습니다. 이를 수행하기 위해 간단히 수행했습니다.

img#me { 
    width: 300px; 
    float: left; 
    margin-right: 30px; 
} 

이 방법은 텍스트 줄 바꿈 작업에 사용되지만 다른 요소는 뒤에 있습니다. 예를 들어

<style> 
h2 { 
    background: black; 
    color: white; 
} 
</style> 
<img id="me" src="http://paultarjan.com/paul.jpg" /> 
<h2>Things!</h2> 

그런 다음 h2 배경은 바로 30px 여백을지나 흐른다. 대신 어떻게해야합니까?

Answer 1

가 나는 이유를 정확히 설명 할 수 좋겠지 만,

h2 { 
    ... 
    overflow: hidden; 
    ... 
} 

가 문제를 해결해야한다.

Answer 2

나는이 문제를 이해하고 있는지 모르겠다. 그러나 나는 h2이 block 인 것으로 확신한다. 그것이 당신을 위해 작동한다면, 가장 쉬운 치료법은 display: inline이 될 것입니다. 그렇지 않은 경우 h2에 특정 너비를 지정하고 float: left도 지정하십시오.