HTML 浮动

HTML 浮动
浮动的定义：
浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框为止。
浮动框会脱离文档（ DOM ）流，（也就是浮动框会脱离原来的界面，浮动到原来界面的上方界面）父级元素会表现出浮动框不存在一样现象。
元素一旦浮动之后，后面的元素就会占据前面元素的位置
元素浮动之后 的确可以脱离文本文档流，所以就会有字围效果
浮动的特点：
浮动和清除浮动成对出现
清除浮动一般放在最靠近浮动元素的尾部，清除浮动只对同级元素有效。
检查是否正确清除浮动，看父级元素的高度，如果高度等于0，则说明，浮动没有清除

清除浮动的方法：

1. 在结尾处添加空div 标签clear：both
   此种方法是在最后的一个浮动元素后面添加空的div，但是由于添加了一个空的div，会使人看上去不是那么舒服，也就没那么推荐使用。
   
   2.利用伪元素清浮动
   此种方法的优先级高于第一种的清浮动的方法，它具有不改变HTML结构的特点，但是稍微繁琐一些，与第一种情况可以视情况而定。
   
   3.给父级定一个高度，或者使父级浮动，或者添加overflow : hidden / auto。
   此方法不建议使用，容易出现多种问题。