html清除浮动不占位置,css清除浮动常用的四种方法实现

在页面布局中经常会用到浮动和清除浮动的操作，但之前是知其然而不知其所以然，看过多篇文章后，有了一些深入的了解，特整理下来！

浮动的目的：

最初设计浮动的目的是为了实现文字等内容可围绕图像显示，后来发现浮动方便布局，所以支持浮动任何元素，元素设置浮动后，会脱离原先文档的普通流中，让原先各自占据一行的块元素在一行显示，代码展示如下：

.content{

border: 2px solid #afed11;

margin: 100px 600px;

}

.a{

width: 100px;

height: 200px;

background-color: red;

}

.b{

width: 100px;

height: 100px;

background-color:blue;

}

不设置浮动显示如下

如果只设置a块floagt:left:结果如下：

a块脱离了原先的文档普通流，不再占据原先的位置，所以b移移动到原先a的位置，因为a是浮动的，所以会遮挡住b，因为父元素没有设置高度，所以父元素的高度由子元素决定，现在为b的高度，a浮动后，超出了父元素的高度。

现在把b块也设置floagt:left，就实现了2个块状元素在一行显示：

现在看到虽然实现了2个块状元素在一行显示，但是父元素的高度现在为0，会影响到兄弟元素的排版，所以我们现在要解决这个问题，就用到了清除浮动的操作

清除浮动的方法

清除浮动后正常的显示如下图：

1、在父元素高度固定的情况下，可以直接设置父元素的高度height: 200px即可正常显示

2、增加块元素，用clear:both清除

.clear{

clear: both;

}

clear：both是清除此元素左右2边的浮动，所以此元素会独占一行，在a、b的下一行，但clear仍然在文档流中，必须包含在父元素内，所以父元素为了包含clear，只能增加高度，最终的效果就达到了高度被撑起来。

用这种方法清除浮动，会为文档中增加不必要的结构，不推荐。

3、 给父元素设置overflow清除浮动

.content{

border: 2px solid #afed11;

margin: 100px 600px;

overflow: auto;

}

overflow值可以是除visible之外的任何值，都能达到撑起高度的效果，但是scroll是导致滚动条始终存在，hidden会隐藏超出边框的部分，所以在选择的时候要格外注意

为什么overflow会实现这种效果呢？是因为它是一个块级格式化上下文 (Block Fromatting Context)，W3C对BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions)，以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC(块级格式上下文)。

BCF可以包含浮动元素，所以能实现撑起高度的效果。

4、使用after伪类

.clear{zoom:1}

.clear:after{

content:'';

height: 0;

display: block;

clear:both;

}

跟第2个方法原理类似，只是区别在于:clear在html中插入一个div.clear标签，而content 利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

以上是常用的几种方法，可以根据场景的不同选择适合的。