<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>float 배우기</title>
<style>
#a {
width: 100px;
height: 50px;
background-color: orange;
float: right;
}
#b {
width: 100px;
height: 100px;
background-color: royalblue;
float: left;
}
p{
clear: both;
}
</style>
</head>
<body>
<div id="a"></div> <!--float은 컨테이너의 왼쪽이나 오른쪽에 배치되게
브라우저가 커지면 같이 커져요-->
<div id="b"></div> <!--p태그들 clear: both; 쓰면 깔끔하게 float밑으로가요 -->
<p>이건 세번째 태그</p>
<p>이건 세번째 태그</p>
<p>이건 세번째 태그</p>
<p>이건 세번째 태그</p>
</body>
</html>
우선 바디에 두개의 컨테이너를 생성해놓고
<div id="a"></div>
<div id="b"></div>
#같은 id선택자로 꾸밈
스타일로 높이여백 백그라운드 색깔까지 만듬
float를 미적용했을 때 컨테이너 모습이고
float를 오렌지도형을 오른쪽으로 적용했을떄
로열블루도형을 왼쪽으로 적용했을때
p태그가 같이 따라옴
그럴떄
p태그에
claer: both;를 사용한다면
이렇게 p태그가 내려가게 된다.
'프론트엔드 > css' 카테고리의 다른 글
| [유노코딩 css 13강] position 속성 중 fixed,sticky (0) | 2023.08.03 |
|---|---|
| [유노코딩 css 12강] position 속성값 중 relative,absolute (0) | 2023.08.03 |
| [유노코드 css 10강] 백그라운드 하위 속성 그림,이미지 넣기,위치,정 (0) | 2023.08.03 |
| [유노코딩 css 9강] 박스모델 너비 높이, 콘텐츠 모델 (0) | 2023.08.03 |
| [유노코딩 css 8강] padding과 margin (0) | 2023.08.02 |
