浮动元素

特征

浮动元素会脱离文档流，并向左/右浮动，直到碰到父元素或者另一个浮动元素的边框

特点

1. 实现文字环绕

   当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列

   

2. 实现内联排列

   浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的一个神奇的存在，但是如果每个元素的高度不一致，会出现“卡住”的情况。

   

3. 导致父元素高度塌陷

   浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度

   

清除浮动

clear清除浮动

clear属性规定元素的哪一侧不允许其他浮动元素；可选择的值有：left, right, both, none, inherit

在最后一个浮动元素后添加

<div style='clear:both'></div>

本质： 闭合浮动，让父盒子闭合出口和入口，不让盒子出来，父元素自动检测盒子的最高的高度，然后与其同高。

优点： 简单，代码少，浏览器兼容性好

缺点： 增加了一个无意义标签，语义化差

bfc清除浮动

父元素添加overflow:hidden或者overflow:auto，通过触发bfc实现清除浮动

缺点： 元素阴影或下拉菜单会被截断,若要兼容IE6需要再添加*zoom: 1;

after伪元素清除浮动

父元素添加伪元素，最佳方案

// 现代浏览器clearfix方案，不支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

// 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

display:table和display:block的区别：

• display: table可以触发BFC块格式化上下文，限制其内部元素float的不影响到BFC外面.

• 伪元素的display默认为inline，这里display: table是用在伪元素上, 那他和display: block一样, 就只是将伪元素变成块级元素.

• 有一点小区别是:

  • 如果是block, .clearfix内容为空的话,.clearfix上方和下方的元素可以发生margin合并

  • 如果是table, 相当于在上下方元素之间隔了一个BFC, 即使.clearfix内容为空, 上下方元素依然不margin合并.

zoom属性：

本来作用是设置或检索对象的缩放比例

• 可以让网页实现IE7中的放大缩小功能。比如你想让你的网页缩小为原来的一半，那么就在body中加入style="zoom:0.5"

• 设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题。