CSS清除浮动

如何清除浮动

1.通过浮动元素末尾增加块级元素 div。利用 css 提高的 clear：both 清除浮动，让父级 div 能自动获取到高度，如果页面浮动布局多，就要增加很多空 div

.clear{
    clear:both;
}

<div class='clear'></div>

2.在浮动元素的父级增加代码
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果**（超出盒子部分会被隐藏，不推荐使用）**

overflow: hidden;

3.使用邻接元素处理

<div class="news">
<img src="1.jpg" />
<p>some text</p>
<div class="content">***</div>
</div>
.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.content{
  clear:both;
  }

4.伪类选择器

.clearfix:after{
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden; 
}
给浮动元素父亲增加clearfix类

5.双伪类选择器

.clearfix::before,
.clearfix::after
{
    content: "";
    display: table;
}
.clearfix::after{
    clear: both;
}
给浮动元素父亲增加clearfix类