css浮动

流的概念
文档流是相对于盒子模型讲的
文本流是相对于文字段落讲的
元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱出文本流。

浮动

浮动的本质:用来实现并排的效果浮动使用的要点:要浮动，并排的盒子都实现浮动父盒子要有足够的宽度，否则子盒子会掉下去

浮动的顺序贴靠特性
子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找前一个兄弟元素如下图所示:3号盒子会掉到2号盒子的下面

浮动的元素一定能设置宽高
浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档，一律能够设置宽度和高度，即使他是a标签或span标签

清除浮动
清除浮动: 浮动一定要封闭到一个盒子中，否则会对页面后续元素产生影响
方法一: 父元素添加 overflow: hidden
方法二:给后面的父盒子设置 clear: both 属性 -- 会导致margin失效
方法三: 使用:after 伪元素 给盒子添加最后一个子元素，并给 ::after设置content:";clear:
both;displa:block;
方法四: 在两个父盒子之间隔一个携带clear: both的空盒子