div태그에 float를 적용 시 div 해당 요소의 margin이 사라지고, float라는 이름처럼 div 해당 요소를 띄어지면서
div의 다음요소들이 위로 올라가진다.
그리고 문제가 되는 점은,
<header>
<div="a_float">
</div>
<p>장문의 글</p>
</header>
a_float의 css로 float가 적용되었을 때,
그 다음 요소인 <p>가 위로 올라가지고 그리고 header 태그의 영억을 넘어 범람하게 된다.
그때 header의 범람하는 요소를 막기 위해 아래와 같은 css를 적용해보자
p::after{
content:" ";
display:block;
clear:both;}
반응형
'프로그램 > vscode' 카테고리의 다른 글
[JavaScript] 자바스크립트 슬라이드 이미지 만들기 (0) | 2024.04.04 |
---|---|
반응형 웹 - 반응형의 단위, 가변이미지와 가변동영상 (1) | 2024.04.02 |
오늘 하루 보지 않기 배너 html js (0) | 2024.01.03 |
스파르타 크리스마스 캘린더 만든 후기 (0) | 2023.12.15 |
자바스크립트로 원하는 div 텍스트 선택 후 그 텍스트를 변경하기 (0) | 2023.12.15 |