CSS3浮动与清除浮动

来源：互联网发布：mac上的绘画软件编辑：程序博客网时间：2024/05/29 04:46

浮动的设计初衷：实现文字环绕效果。
浮动的特征：脱离标准文档流，导致父元素高度塌陷，向左或者向右浮动直到遇到其他的浮动元素。
浮动产生的原因：盒子里的子元素使用了浮动属性，脱离了文档流，导致父元素无法被撑开。
浮动造成的副作用：父级的背景无法显示，父级的边框无法被撑开，以及父级与子级之间的margin和padding遭到破坏。
清除浮动的方法：
方法一：在底部插入“clear:both”声明的元素。
原理：在底层元素添加clear属性来清除浮动，是因为clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，即清除所有浮动。
方案1：HTML层面，在浮动元素后面使用一个空元素，如<div...></div> 缺点：裸露太多的div标签。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>清除浮动</title>    <style type="text/css">        .div_first{            width: 300px;            border:2px solid red;        }        .div_second{            width: 100px;            height:100px;            background: #2A2626;            float:left;        }        .div_third{            width: 200px;            height: 200px;            background: #12ED31;            float: left;        }        .div_fourth{            clear:both;        }    </style></head><body>     <div class="div_first">        <div class="div_second"></div>        <div class="div_third"></div>        <div class="div_fourth"></div>     </div></body></html>

方案二：CSS层面，使用after伪元素,推荐使用

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>清除浮动</title>    <style type="text/css">        .div_first{            width: 300px;            border:2px solid red;        }        .div_second{            width: 100px;            height:100px;            background: #2A2626;            float:left;        }        .div_third{            width: 200px;            height: 200px;            background: #12ED31;            float: left;        }        .clearfix:after{            clear:both;            height:0;            content:"";            overflow:hidden;            display:block;        }        .clearfix{            *zoom:1;/*兼容ie6,ie7*/        }    </style></head><body>     <div class="div_first clearfix">        <div class="div_second"></div>        <div class="div_third"></div>     </div></body></html>

其中clearfix可以精简为：

.clearfix:after{    clear:both;    content:"";    display:table;}

方法二：让父元素BFC（IE8+）或者haslayout(IE6/IE7)
BFC:块状格式化上下文，特征：BFC容器是一个隔离的容器，和其他元素互不干扰；我们可以用触发两个元素的BFC来解决垂直边距折叠问。BFC可以包含浮动，清除浮动；通常用来解决浮动父元素高度坍塌的问题。
给父元素添加以下属性来触发BFC：

float：left/right
position:absolute/fixed
overflow:hidden/scroll(IE7+)
display:inline-block/table-cell(IE8+)
width/height/zoom:1/……

例如给父级元素设置overflow:hidden来清除浮动

.div_first{    width: 300px;    border:2px solid red;    overflow:hidden;}

总结：通常使用after伪元素作为清除浮动主要方式。.clearfix只应用在浮动元素的父级元素上。
浮动的注意点：脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position:absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

阅读全文

1 0