07float浮动

[目录]

目录

• [目录]
  • 一、普通流介绍
  • 二、浮动的基本知识

一、普通流介绍

1. 普通流（标准流）：默认状态，元素自动从左往右，从上往下的排列
2. 块元素
   • 独占一行
   • 可以设置宽高
   • 如果不设置宽高，宽度默认为容器的100%
3. 行内元素
   • 与其它元素同行显示
   • 不可以设置宽高
   • 宽高就是文字或图片的宽高

二、浮动的基本知识

1. 浮动

   • 会使元素向左或向右移动，只能左右，不能上下
   • 浮动元素碰到包含框或另一个浮动框，浮动停止
   • 浮动元素之后的元素将围绕它，之前的元素不受影响
   • 浮动元素会脱离标准流

2. 浮动的基本语法

   • float:left;靠左浮动
   • float:right;靠右浮动
   • float:none;不使用浮动

3. 清除浮动常用方法

   • 方法一：在浮动元素后使用一个空元素
     例如：<div class="clear"></div>
   • 方法二：给浮动元素的容器添加over-flow:hidden;
     *zoom:1;/*触发hasLayout兼容IE6、7*/
   • 方法三：使用CSS3的:after伪元素

   clearfix:after{
       content:".";
       display:block;
       height:0;
       visibility:hidden;
       clear:both;
   }
   clearfix{
       *zoom:1;/*触发hasLayout兼容IE6、7*/
   }
   

4. 清除浮动语法
   clear：none/left/right/both
   设置了float的元素会影响其他相邻元素，需要使用clear清除浮动，clear只会影响自身，不会对其他相邻元素造成影响

5. 清除浮动其它方法

   • 父级元素定义height，只适合高度固定的布局
   • 父级元素也一起浮动，不推荐，会产生新的浮动问题

6. 总结

   • 浮动会使元素左右移动
   • 浮动元素会脱离普通流
   • 元素浮动后具备inline-block（行内块元素）属性