내 DIV 요소에는 어떤 변화가 있었습니까?

-1

나는 코드의 간단한 조각이 :내 DIV 요소에는 어떤 변화가 있었습니까?

HTML :

<body> 
    <div id="red"> ABC </div> 
    <div id="blue"> ABC </div> 
</body>

CSS :

body{ 
    width: 300px; 
} 
#red{ 
    float:left; 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 

#blue{ 
    height: 100px; 
    background-color: blue; 
}

내가 빨간색 squara 바로 옆에 파란색을 참조하십시오.

그러나 "width : 100px;"줄을 추가하면 #blue에 모든 것이 파괴된다 는 "ABC는"점프 "한 줄 아래에는 파란색 배경이없는 ??

출처

2012-08-09 Yura

다른 div는 부동 소수점 형이므로 뭔가 떠 다니면 떠 다니지 않은 요소의 바깥 쪽 경계가 떠 다니는 요소보다 작습니다. 따라서 파란색 상자는 실제로 빨간색 하나 뒤에 ..하지만 빨간색은 블록 수준의 요소이기 때문에 텍스트가 거기에 적합하지 않으므로 빨간색 아래에 앉습니다. 둘 다 떠 다니면 작동합니다.

http://jsfiddle.net/AUZxY/

출처

2012-08-09 15:35:57 Tallboy

감사. 나는 이것을 이해할 수 있을지 확신하지 못한다 : "떠 다니지 않은 요소는 그 바깥 쪽 경계가 떠있는 요소 아래에있다". 설명해 주시겠습니까? :) – Yura

#blue 요소에서 float을 제거하고 #red 요소보다 넓은 너비를 지정하면 hopefull [this Fiddle] (http://jsfiddle.net/AUZxY/5/)이 Tallboy 얘기하고 있었어. – Vap0r

감사합니다. – Yura

가 왼쪽으로 두 요소를 떠보십시오 왜 가, 내가 함께 넣어해야 this Fiddle을 믿습니다.

출처

2012-08-09 15:35:52 Vap0r

실제로 왼쪽 작업 모두에 플로팅. – Yura

그러나 원본의 문제점은 무엇입니까? (내가 미래에 그것을 방지하기 위해 무엇이 잘못되었는지 이해하고 싶다. :)) 고마워! – Yura

그 경우 Tallboy의 대답을보십시오. 나는 가장 빨리 대답했다. 그러나 그는 또한 그 문제를 설명하기 때문에 그에게 투표를해야한다. – Vap0r

내 DIV 요소에는 어떤 변화가 있었습니까?

답변

관련 문제