CSS浮动(如果想知道CSS有关浮动的知识点,那么只看这一篇就足够了!)
    		       		warning:
    		            这篇文章距离上次修改已过442天,其中的内容可能已经有所变动。
    		        
        		                
                CSS 浮动(Float)是一种布局方式,用于创建多列布局。浮动元素会尽量向左或向右对齐,直到它的外边缘碰到包含框或另一个浮动元素的边框为止。
浮动可以用于创建文字环绕图片的效果,或者用于创建传统的列布局。
浮动的属性值:
float: none;:不浮动,默认值。float: left;:向左浮动。float: right;:向右浮动。
清除浮动的方法:
- 使用 
clear属性:clear: both;会创建一个块级格式化上下文,清除前面的浮动元素。 - 使用伪元素清除法:
.clearfix::after { content: ""; display: table; clear: both; } - 使用 
overflow属性:overflow: auto;或overflow: hidden;也可以清除子元素的浮动。 
示例代码:
/* 向左浮动 */
.float-left {
  float: left;
}
 
/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
<!-- 浮动元素 -->
<div class="float-left">我向左浮动</div>
 
<!-- 清除浮动 -->
<div class="clearfix">我清除了前面的浮动</div>           
评论已关闭