浮动现象及清除浮动

最新推荐文章于 2021-10-01 21:02:39 发布

yan_gogo

最新推荐文章于 2021-10-01 21:02:39 发布

阅读量134

点赞数

分类专栏：技术分享文章标签：技术分享

本文链接：https://blog.csdn.net/yan_gogo/article/details/80878461

版权

技术分享专栏收录该内容

17 篇文章 0 订阅

订阅专栏

   <!DOCTYPE html> 
 
   < 
  html 
  lang= 
  "en"> 
 
   < 
  head> 
 
   < 
  meta 
  charset= 
  "UTF-8"> 
 
   < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0"> 
 
   < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge"> 
 
   < 
  title>Document</ 
  title> 
 
   < 
  style> 
 
  .far { 
 
  border: 
  1 
  px 
  solid 
  #ccc; 
 
   } 
 
  .son { 
 
  width: 
  200 
  px; 
 
  height: 
  200 
  px; 
 
  background: 
  #49ff00; 
 
   } 
 
   </ 
  style> 
 
   </ 
  head> 
 
   < 
  body> 
 
   < 
  div 
  class= 
  "far"> 
 
   < 
  div 
  class= 
  "son"></ 
  div> 
 
   </ 
  div> 
 
   </ 
  body> 
 
   </ 
  html>

代码显示的图形:

盒子设置浮动:

   <!DOCTYPE html> 
 
   < 
  html 
  lang= 
  "en"> 
 
   < 
  head> 
 
   < 
  meta 
  charset= 
  "UTF-8"> 
 
   < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0"> 
 
   < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge"> 
 
   < 
  title>Document</ 
  title> 
 
   < 
  style> 
 
  .far { 
 
  border: 
  1 
  px 
  solid 
  rgb( 
  8, 
  8, 
  8); 
 
   } 
 
  .son { 
 
  width: 
  200 
  px; 
 
  height: 
  200 
  px; 
 
  background: 
  #49ff00; 
 
  /* 子盒子设置浮动 */ 
 
  float: 
  left; 
 
   } 
 
   </ 
  style> 
 
   </ 
  head> 
 
   < 
  body> 
 
   < 
  div 
  class= 
  "far"> 
 
   < 
  div 
  class= 
  "son"></ 
  div> 
 
   </ 
  div> 
 
   </ 
  body> 
 
   </ 
  html>

代码显示的图形:

盒子设置浮动后下面页面布局:

   <!DOCTYPE html> 
 
   < 
  html 
  lang= 
  "en"> 
 
   < 
  head> 
 
   < 
  meta 
  charset= 
  "UTF-8"> 
 
   < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0"> 
 
   < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge"> 
 
   < 
  title>Document</ 
  title> 
 
   < 
  style> 
 
  .far { 
 
  border: 
  1 
  px 
  solid 
  #ccc; 
 
   } 
 
  .son { 
 
  width: 
  200 
  px; 
 
  height: 
  200 
  px; 
 
  /* 子盒子设置浮动 */ 
 
  float: 
  left; 
 
  background: 
  #49ff00; 
 
   } 
 
  .bod { 
 
  width: 
  600 
  px; 
 
  height: 
  400 
  px; 
 
  background: 
  #0094ff; 
 
   } 
 
   </ 
  style> 
 
   </ 
  head> 
 
   < 
  body> 
 
   < 
  div 
  class= 
  "far"> 
 
   < 
  div 
  class= 
  "son"></ 
  div> 
 
   </ 
  div> 
 
   < 
  div 
  class= 
  "bod"></ 
  div> 
 
   </ 
  body> 
 
   </ 
  html>

代码显示的图形

 
 盒子运用浮动会导致盒子脱标,
使父盒子高度为0,会影响下面页面的布局
所有需要清除浮动 
 

 
 方法: 给父盒子设置
<1> 给父盒子设置高
 只适合高度固定的布局 
 
 
 
<2> 额外标签法:盒子内部最后,再加一个块级标签(div盒子),用clear:both清除
 增加多的div盒子 对于维护不力 
 
 
 
<3> 使用overflow:hidden清除浮动,但是超出父盒子部分会被隐藏
 超出盒子的部分会被隐藏(不推荐使用) 
 
 
 
<4> 使用伪元素清除浮动,
 .clearfix:after {
 Content:””;
 display:block;
 clear:both;
 (为了兼容性)
 height:0;
 line-height:0;
 visibility:hidden;
 }
    .clearfix{
 Zoom:1;
 } 
 
 
 
 
 
<5> 双伪元素清除浮动,
.clearfix：before，
.clearfix：after {
 content： ""；
 display： table；(相当于display:block+触发bfc)
}
.clearfix:after{
 clear： both；
}
.clearfix {
 zoom： 1；
} 