CSS에서 float 속성을 사용할 때 요소 간 침투 현상
이제 텍스트가 단락 안에 배치되고,
float 속성이 지정된 이미지가
이 단락들 위에 위치한다고 가정해 봅시다.
이 경우 다른 태그의 존재는 흐름에 방해되지 않으며,
모든 것이 기존과 동일하게 작동합니다:
<div>
<img src="img.png" alt="">
<p>
some long text
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
img {
float: left;
}
:
이제 첫 번째 단락에 텍스트가 적다면 이 경우 이미지는 두 번째 단락까지 침투하게 됩니다:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
img {
float: left;
}
:
