Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Rainbow

float 속성 clear로 해제하기 본문

web/css

float 속성 clear로 해제하기

kkangsseul1014 2022. 7. 29. 18:43

https://gold-dragon.tistory.com/38

 

float를 clear 하는 방법

<!DOCTYPE html> float clear box1 box2 empty-box * { margin: 0; padding: 0; } .box-wrap { background-color: yellow; } .box1 { width: 100px; height: 100px; background-color: red; } .box2 { width: 100p..

gold-dragon.tistory.com

부모 요소의 가상 선택자 클래스 ::after로 clear: both; 속성을 적용

<test.html>

<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <meta charset="UTF-8" />
  <title>float clear</title>
  <link rel="stylesheet" href="testStyle.css" />
</head>
<body>
  <div class="box-wrap clearfix">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
  </div>
  <div class="empty-box">empty-box</div>
</body>
</html>

 

<testStyle.css>

* {
  margin: 0;
  padding: 0;
}

.box-wrap {
  background-color: yellow;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.box1 {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
}

.box2 {
  float: left;
  width: 100px;
  height: 100px;
  background-color: green;
}

.empty-box {
  height: 200px;
  background-color: blue;
}

 

 

 

 

.box1과 .box2의 부모 요소에 clearfix라는 클래스를 추가해주었습니다. 해당 클래스를 사용해서 가상 클래스 선택자 after를 사용해서 clear: both;를 적용해줍니다. after를 적용하는 것은 해당 요소의 마지막에

content값은 null로 부여하고, display: block; 속성을 적용해서 block 요소로 만들어줍니다. 굳이 box-wrap에 가상 클래스 선택자를 적용하지 않은 이유는, clearfix라는 클래스로 float를 취소하는 용도로 사용하기 위해서 입니다.

출처: https://gold-dragon.tistory.com/38 [계속 쓰는 개발 노트:티스토리]

저작자표시

'web > css' 카테고리의 다른 글

BEM네이밍 컨벤션  (0) 2023.06.12
position absolute/relative 차이  (0) 2022.08.01
웹 호환성( 크로스 브라우징) 테스트 하는 법, 브라우저 별 CSS 적용하기  (0) 2021.12.15
mouseleave mouseenter 차이  (0) 2021.10.24
white-space 속성값  (0) 2021.10.24
'web/css' Related Articles more