浮动: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属性来完成。