CSS之浮动

浮动

常见网页布局

1. 本质：用CSS来摆放盒子，把盒子摆放到相应的位置
   三种常见布局方式：普通流（标准流）、浮动、定位
2. 浮动常见布局：
   

标准流（普通流、文档流）

即标签按照默认方式排列eg：块级元素独占一行、行内元素按顺序排列
是最基本的布局方式

为什么需要浮动

网页浮动第一准则：多级块元素纵向排列找标准流，横向排列找浮动

什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

浮动特性（重难）

1. 脱标：浮动元素会脱离标准流，控制（浮）移动到指定位置（动），浮动的盒子不再保留原先位置
2. 行显示：如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
3. 具有行内块元素的属性，任何元素都可以浮动，不管原先是什么模式的元素，浮动后都具有行内块元素的特点，不需要转换模式
   tips：
   ①如果块级元素没有设置宽度，默认宽度和父级相同，添加浮动后，它的大小根据内容决定
   ②浮动的元素是互相间贴在一起的，没有缝隙，如果父级元素放不下这些元素，则会换行放置

注意：

1. 浮动元素经常和标准流父级搭配使用
   约束浮动元素位置，采取的一般策略是：先用标准流父级元素排列上下位置，内部子元素采取浮动排列左右位置，符合网页布局第一准则
2. 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

1. 为什么？当父盒子不方便给高度，子盒子浮动又不占位置，是的父盒子高度为零，从而影响下面的标准流盒子

2. 本质：清楚浮动元素造成的影响

3. 语法格式：

   选择器 {
       clear: 属性值;
   }
   

   

4. 清除浮动的策略：闭合浮动

5. 清除浮动方法：

   • 额外标签法：隔墙法
     在浮动元素的末尾添加一个空标签，这个空标签必须是块级元素，eg：<div style="clear:both"></div>，或者<br/>
     书写方便但会添加许多无意义的标签
   • 父级添加overflow属性
     给父级添加overflow属性，将其属性值设为hidden、auto、或scroll
     代码简洁但无法显示溢出部分
   • 父级添加after伪元素
     额外标签法的升级版
     语法格式：

   .clearfix:after {
       content: "";
       display:block;
       height:0;
       clear:both;
       visibility: hidden;
   }
   .clearfix {
       //IE6、7专有
       *zoom:1;
   }
   

   没有增加标签，结构更简单

   • 父级添加双伪元素
     给父元素添加

   .clearfix:before,
   .clearfix:after {
       content:"";
       display:table;
   }
   .clearfix:after {
       clear:both;
   }
   .clearfix {
       *zoom:1;
   }
   

   总结：