div 내 텍스트 동작

Question

테두리 내용이없는 <div> 안에 텍스트가 있습니다. 다른 사업부와 상단에 this example 같이

<div id="main"> 
    <div id="second"></div> 
    <p>TEXT</p> 
</div> 

CSS

#second { 
    height: 100px; 
    width: 100px; 
    background:red; 
    float:left; 
} 

#main { 
    width: 200px; 
    height: 200px; 
} 

내 텍스트를 정렬합니다. 내가 DIV에 CSS의 border 속성을 추가 할 때

는 pharagraph 마진을 적용했다 - see here은

는 왜 발생합니까?

Answer 1

float:left;을 한 div에만 사용하면 예기치 않은 동작이 발생합니다. p에 float을 사용하면 다른 동작을 얻지 못합니다.

Check this demo : 테두리를 설정/해제합니다. spec 가입일

:

A는 상자 왼쪽 또는 오른쪽으로 시프트 바깥 가장자리가 함유 블록 에지 또는 다른 유동 가장자리에 닿을 때까지 뜨게된다. 라인 박스가 있으면, 플로팅 된 박스의 바깥 쪽 상단이 현재 라인 박스의 상단과 정렬됩니다.

플로트의 수평 공간이 충분하지 않은 경우 플로트가 들어 가지 않거나 플로트가 더 이상 없을 때까지 아래쪽으로 이동합니다.