css基础_浮动和清除浮动

一、浮动简介

最初浮动是用来实现文字环绕图片效果的，后来成为布局方式之一

二、浮动之后的特点

1. 脱离文档流
2. 不管什么原素，浮动后宽高默认由内容撑开，而且可以设置宽高
3. 不会独占一行，可以与其他原素公用一行
4. 不会margin合并，也不会margin塌陷
5. 不会像行内块一样当做文本处理(没有行内块的空白问题)

三、浮动后影响

1. 对兄弟元素 : 后面的兄弟原素，会占据浮动原素之前的位置，对前面的原素无影响
2. 对父原素影响 : 不能撑起父原素高度，导致高度塌陷，但父原素宽带依然限制浮动的原素

四、清除浮动影响

1. 给父原素设置高度
2. 给父原素设置浮动，带来其他影响
3. 父原素设置overflow:hidden
4. 所有浮动元素最后加一个空的块原素，并设置clear:both
5. 给浮动原素的父原素设置伪原素，添加

父原素::after {
  content:'';
  display:block;
  clear:both;
}