回顾与复习 写一章关于 CSS浮动的特点 与为何 清除浮动 以及方法

342 阅读1分钟

亚里士多德曾经说过:人生最终价值在于觉醒和思考的能力,而不只在于生存。 (下面是正题)

1.浮动的特点

 1.浮动的特点
  1.1浮动元素会脱离标准流(简称:脱标),在标准流中不占位置
     看图: 例如:相当于从地面飘到了空中
  1.2浮动元素比标准元素高半个级别,可以覆盖标准流中的元素
  1.3浮动找浮动(同方向浮动),下一个浮动元素会在上一个浮动元素后面左右浮动
  1.4浮动元素会受到上面元素边界的影响
  1.5浮动元素有特殊显示效果
  *一行显示多个
  *可以设置宽高
 

image.png

2.为何要清除浮动

  如果子元素浮动了,假设父元素不给高度,父元素的高度为0,此时子元素不能撑开标准流的块级父元素,
  原因:子元素浮动后脱标->不占位置
  目的/方法:需要父元素 有高度,从而不影响其他网页的布局.
 
 
3.清除浮动的方法
 3.1给父元素设置宽高(简单暴力)
 3.2额外标签法
 3.3单伪元素清除法(使用after伪元素清除浮动(推荐使用))
 3.4双伪元素清除法(推荐)
 3.5给父元素设置overflow:hidden;
 
 额外标签法(在浮动元素末尾添加一个空的标签.例如:)
 /* 清除浮动 */
  .clearfix::after {
    content: '.';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  
  /* 兼容ie6 ie7 */
  .clearfix {
    *zoom: 1;
  }
/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

注:以后会日推更新.

注:有小白想要练习关于一些html/css/js等 资源文件项目的 的可以关注我找我要~~~