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; 
}

代码演示:

202101071610001106148806

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; 
}

代码演示:

202101071610001204106627-1658129090028

可以看到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; 
}

代码演示:

202101071610001412392560

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

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

css样式:

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

代码演示:

202101071610002201134905

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

代码:

202101071610002574355074

css样式:

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

代码演示:

202101071610002647108022