본문 바로가기

coding/css

0512 / float.css (clearfix, clear:both 개념)

@charset "UTF-8";

 

/* css/src/basic_code_06_float.css */

 

/* reset.css */

html,body,h1,h2,h3,h4,h5,h6,p,div,ul,li,dl,dt,dd {

  margin:0padding:0;

}

ul,ol,li {

  list-style:none;

}

 

/*  */

#wrap {

  width:800pxheight:automin-height:900px;

  margin:auto;

  background-color#dfdfdf;

}

 

.part {

  width:90%height:automin-height:300px;

  margin:automargin-bottom:100px;

  background-color#faa;

 

h3 { width:100%text-align:center; }

 

.inner { width:95%height:automargin:auto;}

.overflow_type {

  overflow:autoheight:200px

  background-color#cdf;}

 

.other_type {background-color#daf;}

.height_fix_type {height:900pxbackground-color#dfc;}

.ghost_type {background-color#dca;}

 

.overflow_type > p,

.other_type > p,

.height_fix_type > div,

.ghost_type > li {

  float:left;

  width:49%height:200px;

  border-width:1px;

  border-style:solid;

  border-color:#171717;

}

 

.clear { width:100%height:0clear:both; }

 

.clearfix:after ,

.clearfix::after {

  content:" ";

  displayblock;

  width:100%height:0;

  clear:both

}

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

0515 / float & clear 속성 내용 정리  (0) 2021.05.15
0513 / layout.css (float속성 & clear속성)  (0) 2021.05.13
0511 / layout.css - float와 clear 속성값  (0) 2021.05.11
0510 / layout.css 작성  (0) 2021.05.10
0506 / basic_code_05_reset.css  (0) 2021.05.07