清除浮动的方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title>
<style>
div.items
{
  float: left;
  width: 100px;
  height: 100px;
  background-color: pink;
  border: 1px solid blue;
  margin: 5px;
}
div.container{
  /*清除浮动法2 触发BFC  */
  /* overflow: hidden; */
  border: 2px solid black;

}
div.clear{
  /* height: 0; */
  clear: both;
}
/* 清除浮动法2 采用伪元素,这里我们使用:after。添加一个类clearfix */
.clearfix:after {
  content: '';
  display: table; /* 这个伪元素是行内元素,采用table而不是block此方法可以有效避免浏览器兼容问题*/
  clear: both; 
}
</style>
</head>

<body>
<div class="container clearfix">
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>

  <!-- 清除浮动的方法 -->
  <!-- 1、添加冗余元素并设置 clear: both; -->
  <!-- <div class="clear"></div> -->
</div>
</body>
</html>

posted @ 2020-09-09 12:24  精灵W的博客  阅读(157)  评论(0编辑  收藏  举报