浮动与清除浮动

浮动与清除浮动

浮动相关知识

float属性的取值：

left：元素向左浮动。

right：元素向右浮动。

none：默认值。元素不浮动，并会显示在其在文本中出现的位置。

浮动的特性：

浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。

不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。

浮动元素的展示在不同情况下会有不同的规则：

浮动元素在浮动的时候，其margin不会超过包含块的padding。PS：如果想要元素超出，可以设置margin属性

如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。

如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。

如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。

如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素

浮动元素会尽可能地向顶端对齐、向左或向右对齐

重叠问题

行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上

块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上

clear属性

clear属性：确保当前元素的左右两侧不会有浮动元素。clear只对元素本身的布局起作用。

取值：left、right、both

**`父元素高度塌陷问题`**

为什么要清除浮动，父元素高度塌陷

解决父元素高度塌陷问题：一个块级元素如果没有设置height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。

3.3 清除浮动的方法

方法1：给父级div定义 高度

原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。

优点：代码简洁

缺点：高度被固定死了，是适合内容固定不变的模块。（不推荐使用）

方法二：使用空元素，如<div class="clear"></div> (.clear{clear:both})

原理：添加一对空的DIV标签，利用css的clear:both属性清除浮动，让父级DIV能够获取高度。

优点：浏览器支持好

缺点：多出了很多空的DIV标签，如果页面中浮动模块多的话，就会出现很多的空置DIV了，这样感觉视乎不是太令人满意。（不推荐使用）

方法三：让父级div 也一并浮起来

这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。 不推荐使用

方法四：父级div定义 display:table

原理：将div属性强制变成表格

优点：不解

缺点：会产生新的未知问题。（不推荐使用）

方法五：父元素设置 overflow：hidden、auto；

原理：这个方法的关键在于触发了BFC。在IE6中还需要触发 hasLayout（zoom：1）

优点：代码简介，不存在结构和语义化问题

缺点：无法显示需要溢出的元素（亦不太推荐使用）

方法六：父级div定义 伪类:after 和 zoom

.clearfix:after{

content:’.’;

display:block;

height:0;

clear:both;

visibility: hidden;

}

.clearfix {zoom:1;}

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：结构和语义化完全正确,代码量也适中，可重复利用率（建议定义公共类）

缺点：代码不是非常简洁（极力推荐使用）

经益求精写法

.clearfix:after {

content:”\200B”;

display:block;

height:0;

clear:both;

}

.clearfix { *zoom:1; } 照顾IE6，IE7就可以了

详细关于浮动的知识请参看这篇文章：

http://luopq.com/2015/11/08/CSS-float/