gwooden_코린이

css 포지션 float 본문

프론트엔드/html

css 포지션 float

gwooden22 2022. 12. 15. 18:11
728x90

1. css 포지션 float

  • float : left -> 해당 요소를 컨테이너의 왼쪽 배치
  • float : right -> 해당 요소를 컨테이너의 오른쪽 배치
  • float : none -> float 적용 안함
  • margin : auto -> 중앙 배
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style5.css">

</head>
<body>
  <div>
  <img class="float" src="image/kakaofriends.gif">
  <p>이것을 대중을 되는 끓는다. 하였으며, 소금이라 생의 인생을 그리하였는가? 돋고, 않는 길지 찬미를 가는 인간은 있을 가는 칼이다. 인간은 실로 우리는 얼음이 뜨거운지라, 미인을 지혜는 발휘하기 생생하며, 것이다. 이 많이 심장의 피는 싹이 행복스럽고 것이다. 없으면 굳세게 얼마나 봄바람이다. 그들에게 피어나기 무엇이 이상의 들어 것이다. 고행을 낙원을 풀밭에 것이다. 천하를 인류의 끓는 없는 미묘한 이상의 갑 쓸쓸하랴? 우는 되는 노래하며 피가 심장의 그리하였는가?

  </p>
  <p class="clear">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<p>새로운 p태그그</p>
</body>
</html>
.float {
  float: right;
}

.clear {
  clear: both;
}

div {
  width: 1000px;
  height: 150px;
  border: 1px solid red;
  overflow:scroll;
}
728x90
저작자표시 비영리 변경금지

'프론트엔드 > html' 카테고리의 다른 글

html + CSS 네이버 로그인 창 만들어보기  (0) 2022.12.16
css 박스 사이즈  (0) 2022.12.16
css 표 다뤄보기  (0) 2022.12.15
css 박스 모델  (0) 2022.12.15
css 네비바 구현 적용 해보기  (1) 2022.12.15
'프론트엔드/html' Related Articles more
Comments