CSS之浮动

浮动

先说一个问题

• 文字图片对不齐

  解决办法

1.文字与图片基线对齐（文字默认与基线对齐，但图片的基线是图片最下面的那条边，图片的底线在它空白的下面）

调整文本垂直对齐方式的属性
 verticle-align:top顶对齐/middle中线对齐/baseline基线对齐/bottom底线对齐

2.给两个盒子加了一个触发规则BFC的属性：overfllow:hidden

结论：对块级元素而言，用diaplay：inline-block实现并排并不是最好的做法。因为diaplay：inline-block会使元素转换为行内块元素 它具有文本属性 基线对齐 导致对不齐（图片在上，文字在下）而且，盒子中间会有空隙

图片下间隙问题：

这个间隙是什么：这个间隙是图片下间隙，产生的原因是，图片具有文本特性，就会默认以基线对齐，这个下间隙实际实际就是基线与底线之间的距离，一般默认3px，但是可以发生改变，随着字体大小发生变化

解决方法：

• 修改图片的对齐方式，不以基线对齐
• 给图片添加 display：block 属性 使图片丢失文本特性

浮动

浮动的作用：解决盒子并排问题

float:left/right/none(默认);

left:找父元素的左边界停靠
right：找父元素的右边界停靠
none：保持原本位置，标准流
每一个并排的盒子身上都要加并排属性
并排无间隙

标准流：一行一个，从左侧边界开始放置

浮动会带来一个现象，盒子实现了并排放置—>脱离标准流—>成为浮动流—>不占界面位置，可以使盒子并排，但还是会有不好的影响

浮动带来的影响：

脱离标准流—>成为浮动流—>不占界面位置—>导致其他盒子向上移动

**导致父盒子的高度塌陷：**父盒子的高度本来是由子元素撑开的，父亲的高度计算是从内容的高度得来的，现在由于浮动元素不占位置，所以子元素高度无法计算，父盒子的高度为0或者塌陷了。

**清除浮动造成的影响（解决方法）：**现象，本质

• 现象：

  • 给父盒子定高度 height

    缺点：不实际 实际中就是有时候高度就是auto

• overflow：hidden 给父元素加BFC规则（私人区域）

  处于BFC规则的盒子 其外的元素不会影响到他，它内部的元素也不会影响到其外的元素

  BFC规则说明，只要是BFC盒子内部子元素浮动，则父盒子会计算浮动子元素的高度

  • 缺点：会隐藏掉故意溢出的元素

    [外链图片转存失败(img-4OhZ946d-1565270882836)(E:\老师整理\day05\笔记\media\overflow缺点.png)]

• css属性中有一个属性可以清除浮动影响

  clear:left/rigth/both(首选)  clean:both
  
  属性必须依靠结构存在--->必须写在body里面
  <div style="clear:both"></div>   块级元素  可以清除浮动影响
  <span style="clear:both"></span>   行内元素  不能清除浮动影响
  

  空标签 放置位置放置在所有浮动子元素之后

  清楚浮动的元素必须是块级元素

  • 缺点 增加了无用（没有向用户展示的数据）空标签 导致文档树变大，数据冗杂

• 伪元素法清除浮动造成的影响

  由于上面方法 增加了空的结构标签—>用css去创造这个空的结构标签

  伪元素的写法：
  1:E::after{
      //作用是插入一个节点（块级元素，行内元素，行内块元素）到E元素所有内容之后
      content:'文本内容';//设置伪元素的文本内容
  }
  2:E::before{
      //作用是插入一个节点（块级元素，行内元素，行内块元素）到E元素所有内容之前
      content:'文本内容';
  }
  创造一个清除浮动的公用名字（衣服）clearFix
  

  伪元素默认的显示模式是行内模式

  ::最终方案：

  .claerFix::after,.claerFix::before{
      content:'不要有空格';
      height: 0;
      font-size: 0;
      line-height: 0;
      display:block;//原因，只有块级元素才可以清除浮动影响
      clear：both；
      
      
      content:attr（data-info）   获取data-开头的自定义属性的值
          <div class="q"  data-info="数据"></div>
  data-info自定义属性的值
  }
  

显示与隐藏属性

隐藏以后不占位置

显示与隐藏： display  展示

显示：display：block；
隐藏：display：none；