플로팅 된 요소의 순서

꽤 이해가 안되는 요소가 떠 다니는 문제가 발생했습니다. 설명하는 것보다 문제를 보여주기가 쉽습니다. 따라서 플로팅 된 요소를 어떤 순서로 배치하는지에 따라 결과가 어떻게 다른지 보여주는 두 가지 예제를 만들었습니다.플로팅 된 요소의 순서

예 # 1

HTML :

<body> 
    <div class="float-right"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate metus velit, at mattis orci consectetur sit amet. Etiam tellus risus, ornare at tellus sit amet, suscipit aliquet sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed congue odio non massa vehicula convallis. Nullam maximus diam eu lectus pellentesque, et imperdiet erat fringilla.</p> 
    </div> 
    <figure> 
     <img src="http://imageserver.moviepilot.com/watch-teenage-mutant-ninja-turtles-season-2-episode-16-online-the-lonely-mutation-of-baxter-stockman-threatens-to-mutate-april-is-the-new-n.webp?width=640&height=479" title="TMNT!" alt="TMNT 90's logo" /> 
     <figcaption>TMNT logo from the 90's</figcaption> 
    </figure> 
</body>

CSS

div { 
    width: 300px; 
} 
img { 
    height: 200px; 
    width: 200px; 
} 
.float-right { 
    float: right; 
} 
figure { 
    height: 200px; 
    width: 200px; 
    border: 1px solid black; 
}

출력 : 여기에 http://jsfiddle.net/4yw8ga68/3/embedded/result/

이 단락을 포함하는 사업부를 잘 부유. 이 div 뒤에는 이미지와 캡션이 포함 된 Figure 요소가옵니다. 결과에서 div가 오른쪽으로 떠 다니는 것을 볼 수 있습니다. 결과적으로 이미지는 페이지 왼쪽 상단에 배치됩니다.

예 # HTML 2

div { 
    width: 300px; 
} 
img { 
    height: 200px; 
    width: 200px; 
} 
.float-right { 
    float: right; 
} 
figure { 
    height: 200px; 
    width: 200px; 
    border: 1px solid black; 
}

가 출력

<body> 
    <figure> 
     <img src="http://imageserver.moviepilot.com/watch-teenage-mutant-ninja-turtles-season-2-episode-16-online-the-lonely-mutation-of-baxter-stockman-threatens-to-mutate-april-is-the-new-n.webp?width=640&height=479" title="TMNT!" alt="TMNT 90's logo" /> 
     <figcaption>TMNT logo from the 90's</figcaption> 
    </figure> 
    <div class="float-right"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate metus velit, at mattis orci consectetur sit amet. Etiam tellus risus, ornare at tellus sit amet, suscipit aliquet sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed congue odio non massa vehicula convallis. Nullam maximus diam eu lectus pellentesque, et imperdiet erat fringilla.</p> 
    </div> 
</body>

CSS : http://jsfiddle.net/4yw8ga68/5/embedded/result/

이 코드는 첫번째와 동일에만 떠 사업부가 배치 그림 및 이미지 후. 이 예제에서 div는 오른쪽으로 플로트 된 것으로 보이지만 이미지 때문에 부숴졌습니다.

내 질문은 두 번째 예제에서 출력이 다른 이유는 무엇입니까? 이미지와 그림이 너비가 200px 밖에되지 않으며 플로팅 된 div가 페이지의 오른쪽과 상단으로 모두 떠있을 수있는 충분한 여지가 있음을 고려할 때 출력이 첫 번째 예제와 같을 것으로 기대합니다.

도움을 주시면 감사하겠습니다. 고맙습니다!

출처

2014-11-05 Tom

첫 번째 요소가 플로팅 된 경우 다음에 오는 요소가 모두 채워지기 때문입니다.

그러나 두 번째 요소 만 플로팅 된 경우 첫 번째 요소에 영향을주지 않습니다. 두 번째 요소 이후에 오지 않으므로 첫 번째 요소에는 아무런 영향을 미치지 않습니다. 첫 번째 코드와 동일한 효과를 얻을 수 있지만, 두 번째 HTML 구조를 유지하려면

, 당신은 그와 같이, <figure> 요소에 플로트 속성을 추가해야합니다

여기

figure { 
    height: 200px; 
    width: 200px; 
    border: 1px solid black; 
    float: left; 
}

가 JSfiddle입니다 : http://jsfiddle.net/4yw8ga68/6/

출처

2014-11-05 01:21:39

플로팅 된 요소의 순서

답변

관련 문제