09css属性——浮动

一、浮动float

1、定位方案（position schemes）

常见的三种方式对元素进行定位、布局

• normal flow：标准流、常规流、文档流
• absolute positioning：绝对定位（相对于父元素）
• float：浮动

绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果

2、float

float的取值none（不浮动，默认值）、left、right

3、浮动规则

(1)向左或者向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者是其他浮动元素

(2)定位元素会层叠在浮动元素上面

层叠关系（兄弟关系）

• 标准元素：标准流中的元素不存在层叠

• 定位元素：定位元素会层叠到标准流元素的上面

  • 定位元素之间可用：z-index
  • 前提：必须是定位元素-非static

• 标准元素->浮动元素->定位元素

(3)浮动元素不能与行内级元素层叠，行内级元素内容将会被推出

比如行内级元素、inline-block、块级元素的文字内容

(4)行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐（不会上移动，只会左右浮动）

• 定位元素和浮动元素脱离标准流后为block元素，默认的宽度和高度只会包裹内容(以下两个相冲突)

  display:inline-block;
  float:left;
  

inline-block布局的缺陷

• 若有文字水平方向会有影响
• 其次两个版块之间会有间隙，且间隙的大小是由文本字体大小来决定的

浮动布局边缘多出一个margin

.container 固定的宽度>.wrap+负margin>很多的item

4、浮动元素存在的问题

• 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
• 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
• 解决父元素高度坍塌的问题的过程，一般叫做清浮动（清理浮动、清除浮动）
• 清浮动的目的是：
  • 让父元素计算总高度的时候，把浮动子元素的高度算进去

5、清除浮动的常见方法

1. 给父元素设置固定高度（扩展性不好）
2. 给父元素增加一个空的块级子元素，并且让它设置clear：both
   • 会增加很多无意义的空标签，维护麻烦
   • 违反了结构与样式分离的原则
3. 在父元素最后增加一个br标签：<br clear = "all">
   • 会增加很多无意义的空标签，维护麻烦
   • 违反了结构与样式分离的原则

6、css属性-clear

• clear的常用取值
  • left：要求元素的顶部低于之前生成的所有左浮动元素的底部
  • both：要求元素的顶部低于之前生成的所有浮动元素的底部

<br clear="all">
/* 如果放在父元素（div）内，父元素会包裹它，那么父元素会有高度
   如果放在父元素外，父元素就没有高度*/

/* 伪元素默认为行内级元素 */
.clear-fixed::after{
    content: " ";
    display: block;
    clear: both;
}

7、定位方案对比

定位方案	应用场景
normal flow	垂直布局
absolate positioning	层叠布局
float	水平布局