谈浮动

最近又重新温习了一下浮动的相关知识。在此总结一下，也希望大家能在其中有所收获。

首先我们应该明确的是：什么是浮动？

简单的来说，浮动就是脱离的正常的文档流，向左或者向右偏移，从而后面的元素根据空间大小，自动填充。

浮动的优点：方便布局

浮动的缺点：浮动之后的元素相当于漂浮在了文档流的上方，会导致父元素高度塌陷。

再次顺带介绍一下BFC（Block Formatting Context）的概念，BFC:块级格式化上下文，用于对块级元素的排版，默认情况下只有body一个块级元素，但是如果一个块级元素设置了float：left |right ， overflow：hidden | auto ， position：absolute | fixed ，display：inline-block | table-cell | table-caption那么这个块级元素就会成为一个独立的块级元素。通俗来说就是，块级元素变成一个独立的容器，内外的元素不会再相互影响。

BFC有以下特性：

1.不会被其他的浮动元素覆盖

2.可以包含浮动元素，且自身高度不会塌陷

那么什么是清除浮动？或者说清除浮动是为了解决什么问题？

1.解决元素相互覆盖的问题

2.解决文字环绕问题

3.解决块级元素的高度塌陷的问题

那么如何清除浮动？

1.对清除浮动的元素css设置clear属性

<div style="width:100px; height:100px; background-color:#ccc; float:right; ">3</div>

<div style="width:100px; height:100px; background-color:#ccc; float:right; clear:right">4</div>

2.添加空标签（包括两种情况）

第一种情况：直接在待清楚浮动的元素前面添加空元素

<div style="clear:both"><div> 

或者

<br clear="all">

第二种情况：在浮动元素的父元素的css样式中添加：after伪类；代码如下，

css 样式：

.clearfix:after {

     content:"";

     height:0;

     display:block;

     visibiltity:hidden;

     clear:both;

｝

html元素：

<div class="clearfix">

         <div id="child" style="width:100px; height:100px; float:right">1</div>

</div>

以上的实例会在id为child的div后面添加一个不显示的高度为0的块元素,从而实现清楚浮动的目的

3.对父元素添加css属性

在父元素的css样式中添加： 

overflow：hidden | auto , float:left | right ,position：absolute | fixed ，display：inline-block | table-cell | table-caption  但是这些方法或多或少会有局限性，不建议使用。

以上，欢迎指正！

作者：IMCapricorn
链接：https://www.jianshu.com/p/5dbeb9ff9306