CSSフローティングをクリアする4つの方法

1083 ワード

1. ::after


html:
title
content

css:
.title{
  float:left;
}
.clearfix::after{
  content:'';
  display:block;
  clear:both;
}

2. overflow:hidden


html:
title
content

css:
.title{
  float:left;
}
.clearfix::after{
  overflow:hidden;
}

3.clear:both(一)


html:
title
content

css:

.title{
  float:left;
}
.clearfix{
  clear:both;
}

4.clear:both(二)


html:
title
content

css:
.title{
  float:left;
}
.content{
  clear:both;
}