解释下浮动和它的工作原理？清除浮动的技巧

原文链接：https://www.nowcoder.com/ta/front-end-interview/review?query=&asc=true&order=&page=19

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1. 使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

2.  给父元素设置高度（不推荐）

清除浮动的方法基本上属于clear和使父元素包裹两大类，设置overflow属性，使父元素浮动等都属于第二类，同理，可以设置父元素position:absolute，display:inline-block等，一些具有包裹性的CSS属性，都具有抑制浮动副作用的作用。

3. 使用overflow。

overflow:hidden/auto 
使用这种方法的原理是overflow需要父元素紧贴子元素，所以父元素需要撑大来包裹子元素，需要注意当设置成auto时，如果父元素内容过多，会出现滚动条，而使用hidden时，不能和position配合使用，因为超出的尺寸的会被隐藏。 
这个方法不适用于IE6/7，需要加上一个IE特有的属性zoom:1

4. 使用after伪对象清除浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

• clear:both/left/right 
  clear属性是指元素的两边或某一侧不能有浮动元素，为了达到这个目的，在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。最终使这个元素被挤到浮动元素的下外边距以下。 
  以这种方法为原理，通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。 

  更高级的方法是通过伪元素选择器在父元素后面增加了一个clear:both的元素，也就是bootstrap采用的.clearfix

1 2	.clearfixt:after{ display : block /table; clear : both ; content : "" ; }