CSS清除浮动的几种方法

本文档学习参考至:详解 清除浮动 的多种方式（clearfix）

浮动会导致什么影响：元素脱标，不占据父元素的空间，导致页面布局出现问题，因此需要清除浮动带来的影响

下边通过以下例子进行解释

首先在页面设置一个box（div元素）包括两个content（div元素），content大小不同便于浮动的时候观察

<style>
　　　　　.box1 {

            background-color: yellow;
        }
        .box2 {
            background-color: blue;
        }
        .content1 {
             100px;
            height: 100px;
            background-color: green;
        }
        .content2 {
             120px;
            height: 120px;
            background-color: red;
        }

    </style>

<div class="box1">
　　<div class="content1">content1</div>
</div>
<div class="box2">
　　<div class="content2">content2</div>
</div>

 

 若为content1设置float：left，则content1浮动，但由于元素处于左边，所以content1在页面位置不受影响

而box1高度本来为content1内容撑开的高度，但由于content1浮动，导致元素脱标，故box1高度变成0

而box2会由于box1高度变为0而移动到box1位置导致两个box重合，

但由于content2的内容不会随由于content1浮动原因而往上，故content2内容在content1容器的下边

效果如下

 从图上可以很直接看出了由于浮动导致的问题，content2的布局收到了content1的影响

那么如何清除浮动对页面布局的影响呢

有以下几种方式

方法1：为浮动的父元素添加高度

简单粗暴但不推荐，因为在实际的开发过程中，很多元素无法确定高度。

实例：为box1添加高度为100px，使其高度为content1高度

方法二：在父元素中添加子元素，并为添加的子元素中添加clear，清除浮动

clear是css中用来清除元素浮动的，具体有四个值：

1、none
默认值，不做任何清除浮动的操作
2、left
清除前面元素左浮动带来的影响
3、right
清除前面元素右浮动带来的影响
4、both
清除前面元素所有浮动带来的影响

具体实例(一些样式不再重复写，都是同一个例子就是了，最终效果图也如上所示，清除完浮动了)

<style>
.clearfix {
            clear: both;
        }
</style>
<div class="box1">
		<div class="content1">content1</div>
		<div class="clearfix"></div>
	</div>
	<div class="box2">
		<div class="content2">content2</div>
	</div>

方法三：为content2或者box2也添加浮动

emm，独乐乐不如众乐乐，所以一起浮动就不会有了，但是不推荐，不可能所有元素都浮动，这样子页面会更难以维护管理

（ 具体实例就不写了，怎么实现大家也很一定都懂了）

方法四：为父元素添加overflow属性，取值可为：hidden或者auto

但存在缺陷：若content中内容超过父元素会被隐藏或者显示滚动条

实例，即为box1添加overflow:hidden或者overflow:auto，这里content内容多主要为了模拟超出范围时页面的表现情况

<div class="box1">
　　<div class="content1">content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1</div>
　　</div>
　　<div class="box2">
	<div class="content2">content2</div>
　　</div>

 设置overflow:hidden时页面效果

 设置overflow:auto页面效果

 方法五：

父元素设置display:table
优势：不影响结构与表现的分离，语义化正确，代码量少
弊端：盒模型属性已经改变，会造成其他问题

（以上摘抄至参考文档，主要是本人对于table使用了解较少，日后有感悟再补充）

方法六：使用:before添加到box2元素中或者:after添加到box1中

目前较常用的解决float方式（至少本人是这样的，嘻嘻）

使用方式:

<style>
.box1:after {
content: "";
display: block;
clear: both;
}
.box2:before {
content : "";
display: block;
clear: both;
}
</style>

暂时就这么多了，还有一个BFC看看再补充，学艺不精，唉