css 去除浮动布局

前言

在清楚浮动的时候呢，网上有7种，这里只介绍3种,小声哔哔，其他4种都有坑。

正文

第一种:

<div class="container">
         <div>
         </div>
         <div>
         </div>
         <div>
         </div>
   </div>
   <div class="referEle">
   </div>

.referEle{
  width: 100px;
  height: 100px;
  background-color: yellow;
}
.container div{
  float: left;
  width: 100px;
  height: 100px;
  margin-left: 10px;
  background-color: red;
}
.container::after
{
  content: "";
  clear: both;
  display: block;
  height: 0px;
  width: 0px;
}

怎么实现的呢？

.container::after 可以理解为container下的最后一个元素，clear: both如果前面的有浮动，那么该元素就往下，这样就把div撑开了。

这样写其实有一些场合用不上，::after可是一个热门伪元素，万一别的元素用了呢？

替补方案:

.referEle{
  width: 100px;
  height: 100px;
  background-color: yellow;
}
.container div{
  float: left;
  width: 100px;
  height: 100px;
  margin-left: 10px;
  background-color: red;
}
.clear
{
  clear: both;
  height: 0px !important;
  float: none !important;
}

<div class="container">
	 <div>
	 </div>
	 <div>
	 </div>
	 <div>
	</div>
	 <div class="clear">
	 </div>
</div>
<div class="referEle">
</div>

但是这样平白无故会多出一个元素，所以另外的方式是:

.overflow{
  overflow: auto;
  zoom: 1;
}

<div class="container overflow">
	 <div>
	 </div>
	 <div>
	 </div>
	 <div>
	</div>
</div>
<div class="referEle">
</div>

可能有些人觉得overflow:auto怎么可以呢？

overflow：auto会根据内容裁剪部分来自动划分滚动条，怎么就可以了呢？

其实这个元素如果不设置高度，那么会根据子元素内容的高度来设置自己的高度，来适应尽可能不出现滚动条。