CSS float浮动属性 消除浮动

浮动float

浮动的出现：最早使文字环绕图片，后来发现能很容易的实现元素并排显示 右浮动打破了常规流的布局

特点：
浮于页面之上，下面的元素会提高占据空位
浮动可以使行内元素拥有块框，也就可以设置宽高

元素浮动的影响：

1. 子元素浮动父元素高度坍塌（父元素继承子元素高度）
2. 会对之后的元素产生影响 布局发生改变

消除浮动影响的方法：

clear 清除浮动带来的影响：

1. 给父元素添加属性 overflow: hidden/auto;（涉及到BFC）
2. 给其后添加空元素(空div、br、hr)添加 clear:left/right/both 或直接对其后的元素添加clear
3. 给父元素添加 after 伪元素 添加clear消除浮动 通过添加类的方式更方便

.clearfix::after { 
     content:""; 
     display:table; /*采用此方法可以有效避免浏览器兼容问题*/
     clear:both;
}

4. 更粗暴的方法 给父元素也添加浮动，这样他们就在同一层了 （涉及到BFC）