CSS) display 수정

1) display 수정

float 속성이 추가된  요소는 display 속성의 값이 대부분 block으로 수정됨

사용법

1. float 속성 추가전

html

<span>1</span>
<span>2</span>
<span>3</span>

css

span {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: tomato;
}

출력결과

2. flaot 속성 추가 후

html

<span>1</span>
<span>2</span>
<span>3</span>

css

span {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: tomato;
  float: left;
}

출력결과

 

 

주의사항

지정값	변화값
inline	block
inline-block	block
inline-table	block
table-row	block
table-row-group	block
table-column	block
table-column-group	block
table-cell	block
table-caption	block
table-header-group	block
table-footer-group	block
flex	flex / float 속성 효과없음
inline-flex	inline-flex / float 속성 효과없음
그외	변화없음

※ flex, inline-flex는 float 속성이 block요소로 변경되지 않음!

자체 실습▽

1. 기본

html

<span>1</span>
<span>2</span>
<span>3</span>

css

span {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: tomato;
/*   display: flex; */
/*   float: left; */
}

출력결과

2. display: flex; 추가

html

<span>1</span>
<span>2</span>
<span>3</span>

css

span {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: tomato;
  display: flex;
/*   float: left; */
}

출력결과

2. display: flex; + float: left; 추가

html

<span>1</span>
<span>2</span>
<span>3</span>

css

span {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: tomato;
  display: flex;
  float: left;
}

출력결과

※ flex, inline-flex를 먹이면 이미 block요소로 변경되어 버림. 뭘 말하는건지 정확하게 모르겠네?
이미 flex를 먹이면 float의 block을 먹일 필요가 없다는 말인가?