CSS——清除浮动

一、为什么需要浮动

有很多的布局效果，标准流没办法完成，此时就需要浮动，因为浮动可以改变元素标签的默认排列方式

最典型的应用，就是让多个块级元素一行内排列显示

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

（1）脱离标准流的控制浮动到指定位置，俗称脱标

（2）浮动的盒子不再保留原先的位置，原本的位置也会被其他的标准流所代替

（1）且一行内显示，每个盒子之间并没有缝隙，且若父级宽度装不下时，剩余盒子会另起一行排列

（1）任何元素均可浮动，如果行内元素设置了浮动，则可以直接设置宽度和高度，不需要再转化块级或者行内块

（2）且块级盒子初始宽度和父级元素相同，但当设置了浮动以后，则会会根据里面的内容渲染宽度

tips1：浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，网页布局一般采取的策略：先用标准流的父盒子排列上下位置，之后内部子元素采取浮动排列左右位置——符合布局第一准则

tips2：浮一发而浮全身

否则，会造成遮挡；但是，浮动的盒子只会对后面的标准流造成影响，因为每个标准流严格占据一行

1.在很多时候，比如写新闻时，新闻的内容多少并不确定，因此需要清除浮动让子盒子将父盒子的空间撑开，既不会浪费空间，也不会造成内容太多而写不开但是子盒子浮动以后，父盒子没有了高度，就会影响下面的标准流盒子

其策略便是：闭合浮动

在最后一个浮动的元素末尾添加一个空的标签，例如：

（或者添加
等其他标签）但必须是块级元素

给父元素添加overflow属性，并将属性值添加为：hidden\auto；

缺点：无法显示溢出的部分

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

但要注意要将父元素的class添加clearfix

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