浮动模型

浮动：float: left / right ;

浮动元素产生了浮动流：
1.所有产生了浮动流的元素，块级元素看不到他们。
2.产生了bfc的元素和文本类属性的元素（inline属性）以及文本都能看到浮动元素。

清除浮动流：clear: left / right / both ;

清除浮动流的方法：
1.在要清除的元素下面写一个p元素，给其添加clear属性清除浮动流，使p元素撑开容器（即撑开父元素）。（一般不建议采用）
2.伪元素：利用伪元素如 E::before 来清除浮动。
注意：在伪元素种要添加 content:" "; 属性才能生效，且clear属性只能应用于块级元素，要先将伪元素利用display属性变为block，再用clear属性清除浮动。

html代码：
<span>123</span>

css代码：
span::before{
              content:"添加内容"；//加上content:"";元素才能生效
}
span::after{
             content:"";
             dispaly:block;//将伪元素变为块级元素才能用clear属性清除浮动
             clear:both;
}

凡是设置了position: absolute; float: left / right / both; 属性的元素浏览器会打内部把元素转换成inline-block; 元素的宽高完全由其内容决定和撑起。

文字环绕效果可使用float属性来完成。