css的浮动和清除浮动

1、浮动元素的一大特点：它之前占标准文档流里的位置，会腾”出来给其他标准文档流中的元素使用!

一个父元素里包裹若干个元素，这些元素是一个集合，这个集合元素中如果所有元素都设置了浮动，且他的父元素足够大，那他们将会在并排显示

<!-- div.son.son1+div.son.son2+div.son.son3 快捷写法--> 
<div class="son son1">盒子1</div> 
<div class="son son2">盒子2</div> 
<div class="son son3">盒子3</div>

css样式：

*{ 
  margin: 0; 
  padding: 0; 
} 
.parent{ 
  width: 800px; 
  height: 800px; 
  border:5px solid red; 
  margin: 0 auto; 
} 
.son{ 
  width: 300px;
  height: 200px; 
  color: blue; 
  font-size: 30px; 
} 
.son1{ 
  background-color:lawngreen; 
} 
.son2{ 
  background-color:lemonchiffon; 
} 
.son3{ 
  background-color:lightgray; 
}

代码演示：

2、当给一个元素浮动属性时，这个元素会脱离标准文档流 ，我们给box1、box2添加float：left

css：

*{ 
  margin: 0; 
  padding: 0; 
} 
.parent{ 
  width: 800px; 
  height: 800px; 
  border:5px solid red; 
  margin: 0 auto; 
} 
.son{ 
  width: 300px; 
  height: 200px; 
  color: blue; 
  font-size: 30px; 
} 
.son1{ 
  background-color:lawngreen; 
  float: left; 
} 
.son2{ 
  background-color:lemonchiffon; 
  float: left; 
} 
.son3{ 
  background-color:lightgray; 
}

代码演示：

可以看到box1、box2并排显示，而box3“消失不见”，这个时候box3代替了之前标准文档流box1的位置，盒子里的文本是不会被盖住的 盒子颜色可以被覆盖 ，我们将box1，box2设置display：none让它们隐藏：

.son1{ 
  background-color:lawngreen;  
  float: left; 
  display: none; 
} 
.son2{ 
  background-color:lemonchiffon; 
  float: left; 
  display: none; 
}

代码演示：

3、浮动的元素脱标：当给一个元素浮动属性时，这个元素会脱离标准文档流Markup

<span class="s1">盒子</div>

css样式：

*{ 
  margin: 0; 
  padding: 0; 
} 
.s1{ 
  float: left; 
  width: 200px; 
  height: 200px; 
  background-color: #0000FF; 
  color: #FFFACD; 
}

代码演示：

4、浮动的元素有“字围”效果

代码：

css样式：

/* 字围效果 */ 
.w{ 
  width: 1000px; 
  margin: 0 auto; 
} 
img{ 
  float: left; 
  width: 100px; 
} 
.w p{ 
  /* 文本首行缩进两个汉字 */ 
  text-indent: 28px; 
}

代码演示：