前端工程学习日记第8天

有些学生提到还要多一个 clear div 来清除会把 HTML 弄脏，

这里老师也分享一个是使用 父元素 增加清除浮动的语法，要清除浮动的内容就在父元素加上 clearfix 的 class 就大功告成，两个清除浮动的用法就视情况来使用哩
-清除浮动前：
html:

  <div class="left"></div>
  <div class="right"></div>
</div>
CSS:
.content{
  background: orange;
  margin: 0 auto;
  padding: 30px;
  width: 500px;
}

.left{
  background: blue;
  height: 300px;
  width: 100px;
  float: left;
}
.right{
  background: red;
  height: 300px;
  width: 100px;
  float: right;
}

-清除浮动後：

<div class="content clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>
CSS:
.content{
  background: orange;
  margin: 0 auto;
  padding: 30px;
  width: 500px;
}

.left{
  background: blue;
  height: 300px;
  width: 100px;
  float: left;
}
.right{
  background: red;
  height: 300px;
  width: 100px;
  float: right;
}
.clearfix:after{
  content:'';
  display:table;
  clear:both;
}