来自张鑫旭大大的《css世界》学习笔记--- about float

6.1 float的本质与特性

浮动的本质是为了实现文字环绕效果

float特性:

• 包裹性（eg:父元素宽200px，子元素为宽128px的图片，此时表现出包裹；子元素宽超过200px,则自适应父元素宽度，最终为200px）(包裹自适应两部分组成)
• 块状化并格式化上下文（块状化：一旦float属性值不为none，其display计算值为block或者table）
• 破坏文档流

• 没有任何margin合并

  tips：不要用text-align属性控制浮动元素的左右对齐，对块级元素是无效的。

  float浮动机制：float属性的作用之一就是使父元素高度坍塌（这不是bug）。行框盒子和浮动元素不可重叠（行框盒子如果和浮动元素的垂直高度有重叠，则行框盒子在正常定位状态下只会跟随浮动元素，不会发生重叠）可以看个有趣例子

  6.2 float与流体布局

  借助float特性，可以实现两栏或多栏自适应布局

  一侧定宽的两栏自适应布局：

  eg:.father{
  overflow:hidden;
  }
  .father > img{
  width:60px;
  height:64px;
  float:left;
  }
  .animal{
  margin-left:70px;
  }

  如果宽度不固定，用百分比宽度也ok

  中间居中的左中右布局：

   eg:<div class="box">
       <a href="#" class="prev">上一章</a>
       <a href="#" class="next">下一章</a>
       <h3 class="title">疯狂动物城</h3>
     </div>
      .prev{float:left;}
      .next{float:right;}
      .title{margin:0 70px;text-align:center;}

  6.3 clear属性

  元素盒子的边不能和前面的浮动元素相邻

  tips:凡是用clear:left或clear:right的地方均可以用clear:both替换（clear对"后面的"浮动元素是不闻不问的）

  clear属性只有块级元素才有效，因此在使用::after清除浮动时要设置display

    .clear{
          content="";
          display:table(也可以是block/list-item);
          clear:both;
          }

  6.4 BFC

  block formatting context 块级格式化上下文

  内部子元素不会影响到外部的元素

  触发BFC的情况：

• 根元素
• float的值不为none
• overflow的值为auto,scroll,hidden
• display的值为table-cell、table-caption、inline-block中的任意一个

• position的值不为relative和static

  元素符合上面任意一个条件，无需使用clear:both清除浮动

  普通流体元素在设置了overflow:hidden后，会自动填满容器中除浮动元素以外的剩余空间，形成自适应布局效果

  与基于纯流体特性实现的两栏或多栏布局相比，基于BFC布局的优点：1）自适应内容由于封闭而更健壮，容错性更强 2）自适应内容自动填满浮动以外区域，无需关心浮动元素宽度

  能担任自适应布局重任的：

• overflow:auto/hidden,适用IE7以上版本
• display:inline-block,适用于IE6和IE7

• display:table-cell,适用于IE8及以上版本

  6.5 overflow与锚点定位

  实现锚点跳转方法：1）a标签以及name属性 2）利用标签的id属性

  锚点定位的触发条件：1）URL地址中的锚链与锚点元素对应并有交互行为 2）可focus的锚点元素处于focus状态

  锚点定位的本质是改变了scrollTop或scrollLeft的值

  使用锚点定位来实现选项卡切换效果 戳这里 不足之处：1）容器高度需要固定 2）"由内而外"的锚点定位会触发窗体的重定位，若页面也是可以滚动的,则点击按钮后页面会发生跳动

  使用"focus"锚点定位 戳这里 通过for属性与input输入框的id相关联，点击按钮触发输入框的focus行为，触发锚点定位。 实际项目里还需用到JS，处理列表部分区域在浏览器外面时依然跳动的问题

   $("label.click").removeAttr("for").on("click",function(){
      $(".box").scrollTop(xxx);
     )};

来自张鑫旭大大的《css世界》学习笔记--- about float

原文：https://www.cnblogs.com/helen-papa/p/9487296.html